ReactのカスタムフックスをJestを使ってテストをする方法

はじめに

よくカスタムフックスのテストを書こうとして、忘れてしまっているので記事にしました。
JestでHooksを直接テストしようとするとエラーになってしまうので、ライブラリを使ってテストを実装していきます。

ライブラリの導入

まずは必要なライブラリ@testing-library/react-hooksを導入します。以下のコマンドでインストールできます。

terminal

$ pnpm add -D @testing-library/react-hooks

テストの実装

renderHook関数を使用して、Hooksのテストを実装していきます。
renderHookの引数にカスタムフックuseCounterを渡すと、その戻り値がresultオブジェクトに入ります。
現在値はresult.current.countに入っています。
また、実際に動作させたい場合は、actを使うと関数実行することが可能です。

use-counter.spec.ts

import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';

describe('useCounter', () => {
  test('zero', () => {
    const { result } = renderHook(() => useCounter());
    expect(result.current.count).toBe(0);
  });

  test('increment', () => {
    const { result } = renderHook(() => useCounter());
    act(() => {
      result.current.increment();
    });
    expect(result.current.count).toBe(1);
  });
});

以下はテストを実装したい関数です。簡単な呼ばれたらcountされる関数になっています。

use-counter.ts

import { useState, useCallback } from 'react';

export const useCounter = () => {
  const [count, setCount] = useState<number>(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return { count, increment };
};

おわりに

React/NextJSを使っているとHooksのテストを書く場面はよくあると思うので、
このライブラリを使ってもっとテストを書いていこうと思います。