React Testing LibraryとJestを使ってカスタムフックのテストコードを書いてみる

//Counter.tsx
import { useCounter } from "../hooks/useCounter";

export const Counter = () => {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => decrement()}>-</button>
      <button onClick={() => increment()}>+</button>
    </div>
  );
};

//useCounter.tsx
import { useState } from "react";

export type props = {
  initialCount?: number;
};

export const useCounter = ({ initialCount = 0 }: props = {}) => {
  const [count, setCount] = useState(initialCount);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  return { count, increment, decrement };
};

//useCounter.test.ts

import { renderHook } from "@testing-library/react"
import { useCounter } from "./useCounter"

describe('useCounter', () => {
  test('initialCount（0）が出力されるか', () => {
    const {result} = renderHook(useCounter)
    expect(result.current.count).toBe(0)
  })
})

import { act } from "react-dom/test-utils"

//省略

test('incrementが正しく動くか', () => {
    const {result} = renderHook(useCounter);
    act(() => { result.current.increment()})
    expect(result.current.count).toBe(1)
 })

test('decrementが正しく動くか', () => {
    const {result} = renderHook(useCounter);
    act(() => { result.current.decrement()})
    expect(result.current.count).toBe(-1)
  })