✏️

カスタムフックの単体テストを試す

2023/03/06に公開

React

Test

Jest

tech

はじめに

カスタムフックを実装し、そのフックに対してテストを書いたのでその学習用記録となります。

開発環境

ライブラリ	version
next	13.1.16
react	18.12.0
node	18.13.0
@testing-library/react	14.0.0

テスト対象のカスタムフック

今回対象となるカスタムフックは以下のようなコードです。
モーダルの表示と非表示、テキストの表示/非表示など、何らかのアクションに対して
反対の状態にするカスタムフックを用意しました。

import { useCallback, useState } from 'react';

const useToggle = (initialState = false) => {
  const [state, setState] = useState(initialState);

  const toggle = useCallback(() => setState((state) => !state), []);

  return { state, toggle };
};

export default useToggle;

カスタムフックのテスト

renderHookを使用することで、フックの単体テストが可能となる。

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

describe('useToggle 初期値', () => {
  test('引数なしの時 false', () => {
    const { result } = renderHook(() => useToggle());
    expect(result.current.state).toBe(false);
  });

  test('引数にtrueを設定した時 true', () => {
    const { result } = renderHook(() => useToggle(true));
    expect(result.current.state).toBe(true);
  });
});

describe('useToggle toggle関数', () => {
  test('stateがfalseの時、trueになる', () => {
    const { result } = renderHook(() => useToggle());

    act(() => {
      result.current.toggle();
    });

    expect(result.current.state).toBe(true);
  });

  test('stateがtrueの時、falseになる', () => {
    const { result } = renderHook(() => useToggle(true));

    act(() => {
      result.current.toggle();
    });

    expect(result.current.state).toBe(false);
  });
});

感想

ドキュメントが充実してたから、実装しやすかったです。
今回は、簡単なフックでしたが次回は、別のフックを含めたカスタムフックに対してテストを書き知見を増やしたいです。