コンテンツにスキップ

カスタムフックのテスト

最終更新日: 2021-03-29
  • フックを単体でテストするケース
    • コンポーネントからフックを切り離しているケースで有用
  • 手法としては @testing-library/react-hooksrenderHook() を使う

カスタムフック

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
export const useUserForm = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const onChangeUserName = (ev: string) => {
        setUsername(ev);
    };
    const onChangePassword = (ev: string) => {
        setPassword(ev);
    };

    return {
        username,
        password,
        onChangeUserName,
        onChangePassword,
    };
};

テストコード

1
2
3
4
5
6
7
8
it('onChangeUserName で username が設定されること', () => {
    // `renderHook` で Hook をレンダリング
    const { result } = renderHook(() => useUserForm());
    // `act()` で Hook のイベントを叩く
    act(() => result.current.onChangeUserName('foo'));
    // 結果を見る
    expect(result.current.username).toBe('foo');
});