問題一覧に戻る
上級テストとベストプラクティス
問題101: カスタムフックのテスト

renderHookユーティリティを使ったカスタムフックのテスト方法を学びます。フックの状態変更、副作用、返り値を分離してテストします。適切なReactバッチ処理を確実にするために状態更新にactラッパーを使用します。コンポーネントをマウントせずに複雑なフックロジックを検証するのに必須です。再利用可能なフックパターンのテスト駆動開発を可能にします。

import { renderHook, act } from '@testing-library/react';
import { useState, useCallback } from 'react';

{/* テストするカスタムフック */}
function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
  
  const increment = useCallback(() => setCount(c => c + 1), []);
  const decrement = useCallback(() => setCount(c => c - 1), []);
  const reset = useCallback(() => setCount(initial), [initial]);
  
  return { count, increment, decrement, reset };
}

describe('useCounter', () => {
  test('increments count', () => {
    {/* テスト用にフックをレンダー */}
    const { result } = ();
    
    expect(result.current.count).toBe(0);
    
    {/* 更新用のactラッパー */}
    (() => {
      result.current.increment();
    });
    
    expect(result.current.).toBe(1);
  });
  
  test('handles initial value', () => {
    {/* 初期値でテスト */}
    const { result } = renderHook(() => useCounter());
    
    expect(result.current.count).toBe(10);
  });
});