カスタムフックを切り出してrenderHookでテストする方法

import { useEffect, useState } from 'react';

export function SearchBox({ onSearch }: { onSearch: (q: string) => void }) {
  const [text, setText] = useState('');
  const [query, setQuery] = useState('');

  // 入力が 300ms 止まったら、検索する語を確定する
  useEffect(() => {
    const id = setTimeout(() => setQuery(text), 300);
    return () => clearTimeout(id);
  }, [text]);

  useEffect(() => {
    if (query) onSearch(query);
  }, [query, onSearch]);

  return <input aria-label="検索" value={text} onChange={(e) => setText(e.target.value)} />;
}

// useDebouncedValue.ts
import { useEffect, useState } from 'react';

// value が delayMs のあいだ変わらなかったら、その値を返す
export function useDebouncedValue<T>(value: T, delayMs: number): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delayMs);
    return () => clearTimeout(id);
  }, [value, delayMs]);
  return debounced;
}

export function SearchBox({ onSearch }: { onSearch: (q: string) => void }) {
  const [text, setText] = useState('');
  const query = useDebouncedValue(text, 300);

  useEffect(() => {
    if (query) onSearch(query);
  }, [query, onSearch]);

  return <input aria-label="検索" value={text} onChange={(e) => setText(e.target.value)} />;
}

// useCounter.ts
import { useCallback, useState } from 'react';

export function useCounter({ initial = 0, max }: { initial?: number; max: number }) {
  const [count, setCount] = useState(initial);
  const increment = useCallback(() => setCount((c) => Math.min(c + 1, max)), [max]);
  const reset = useCallback(() => setCount(initial), [initial]);
  return { count, increment, reset };
}

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

test('increment で1つ増える', async () => {
  const { result } = renderHook(() => useCounter({ max: 3 }));
  expect(result.current.count).toBe(0);

  await act(async () => {
    result.current.increment();
  });
  expect(result.current.count).toBe(1);
});

test('max より大きくならない', async () => {
  const { result } = renderHook(() => useCounter({ max: 3 }));
  await act(async () => {
    for (let i = 0; i < 5; i++) result.current.increment();
  });
  expect(result.current.count).toBe(3);
});

test('落とし穴1：result.current を分割代入してから確かめる', async () => {
  const { result } = renderHook(() => useCounter({ max: 3 }));
  const { count, increment } = result.current;
  await act(async () => {
    increment();
  });
  expect(count).toBe(1);
});

 × src/useCounter.pitfall.test.ts > 落とし穴1：result.current を分割代入してから確かめる 24ms
   → expected +0 to be 1 // Object.is equality

test('落とし穴2：act で包まずに increment を呼ぶ', async () => {
  const { result } = renderHook(() => useCounter({ max: 3 }));
  result.current.increment();
  expect(result.current.count).toBe(1);
});

 × src/useCounter.pitfall.test.ts > 落とし穴2：act で包まずに increment を呼ぶ 4ms
   → expected +0 to be 1 // Object.is equality

// vitest.setup.ts
import '@testing-library/jest-dom/vitest';
import { cleanup } from '@testing-library/react';
import { afterEach } from 'vitest';

declare global {
  var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
}

// act の外で state が変わったら、React に警告を出させる
globalThis.IS_REACT_ACT_ENVIRONMENT = true;

afterEach(() => {
  cleanup();
});

import { act, renderHook } from '@testing-library/react';
import { afterEach, beforeEach, expect, test, vi } from 'vitest';
import { useDebouncedValue } from './useDebouncedValue';

beforeEach(() => {
  vi.useFakeTimers();
});
afterEach(() => {
  vi.useRealTimers();
});

test('300ms たつまでは前の値のまま', async () => {
  const { result, rerender } = renderHook(
    ({ value }) => useDebouncedValue(value, 300),
    { initialProps: { value: 'ね' } },
  );
  expect(result.current).toBe('ね');

  rerender({ value: 'ねこ' });
  expect(result.current).toBe('ね');

  await act(async () => {
    vi.advanceTimersByTime(299);
  });
  expect(result.current).toBe('ね');

  await act(async () => {
    vi.advanceTimersByTime(1);
  });
  expect(result.current).toBe('ねこ');
});

test('落とし穴3：advanceTimersByTime を act で包まない', async () => {
  const { result, rerender } = renderHook(
    ({ value }) => useDebouncedValue(value, 300),
    { initialProps: { value: 'ね' } },
  );
  rerender({ value: 'ねこ' });
  vi.advanceTimersByTime(300);
  expect(result.current).toBe('ねこ');
});

 × src/useDebouncedValue.pitfall.test.ts > 落とし穴3：advanceTimersByTime を act で包まない 34ms
   → expected 'ね' to be 'ねこ' // Object.is equality

test('落とし穴4：rerender に props を渡し忘れる', async () => {
  const { result, rerender } = renderHook(
    (props?: { value: string }) => useDebouncedValue(props?.value, 300),
    { initialProps: { value: 'ね' } },
  );
  rerender();
  await act(async () => {
    vi.advanceTimersByTime(300);
  });
  expect(result.current).toBe('ね');
});

 × src/useDebouncedValue.pitfall.test.ts > 落とし穴4：rerender に props を渡し忘れる 8ms
   → expected undefined to be 'ね' // Object.is equality

test('unmount するとタイマーが片づく', async () => {
  const { rerender, unmount } = renderHook(
    ({ value }) => useDebouncedValue(value, 300),
    { initialProps: { value: 'ね' } },
  );
  rerender({ value: 'ねこ' });
  expect(vi.getTimerCount()).toBe(1);

  unmount();
  expect(vi.getTimerCount()).toBe(0);
});

// cart.tsx
import { createContext, useContext, useState, type ReactNode } from 'react';

type Cart = { items: string[]; add: (item: string) => void };

const CartContext = createContext<Cart | null>(null);

export function CartProvider({ initialItems = [], children }: { initialItems?: string[]; children: ReactNode }) {
  const [items, setItems] = useState(initialItems);
  const add = (item: string) => setItems((prev) => [...prev, item]);
  return <CartContext value={{ items, add }}>{children}</CartContext>;
}

export function useCart(): Cart {
  const cart = useContext(CartContext);
  if (!cart) throw new Error('useCart は CartProvider の中で使ってください');
  return cart;
}

test('wrapper で CartProvider を渡すと、カートに入れられる', async () => {
  const wrapper = ({ children }: { children: ReactNode }) => <CartProvider>{children}</CartProvider>;
  const { result } = renderHook(() => useCart(), { wrapper });

  await act(async () => {
    result.current.add('かつおぶし');
  });
  expect(result.current.items).toEqual(['かつおぶし']);
});

test('wrapper に値を渡したいときは、wrapper を作る関数を用意する', async () => {
  const createWrapper = (initialItems: string[]) =>
    function Wrapper({ children }: { children: ReactNode }) {
      return <CartProvider initialItems={initialItems}>{children}</CartProvider>;
    };
  const { result } = renderHook(() => useCart(), { wrapper: createWrapper(['ねこじゃらし']) });
  expect(result.current.items).toEqual(['ねこじゃらし']);
});

test('入力が 300ms 止まったら、1回だけ検索する', async () => {
  const onSearch = vi.fn();
  render(<SearchBox onSearch={onSearch} />);
  const input = screen.getByLabelText('検索');

  fireEvent.change(input, { target: { value: 'ね' } });
  fireEvent.change(input, { target: { value: 'ねこ' } });
  await act(async () => {
    vi.advanceTimersByTime(300);
  });
  expect(onSearch).toHaveBeenCalledTimes(1);
  expect(onSearch).toHaveBeenCalledWith('ねこ');
});