测试自定义 Hook——用 React 开始 TDD，第 7 篇

import { useState } from 'react';
 
// [로직] 숫자를 관리하고 증가시키는 기능만 담당합니다.
export default function useCounter() {
  const [count, setCount] = useState(0);
 
  const increment = () => {
    setCount((prev) => prev + 1);
  };
 
  // 컴포넌트에서 필요한 값과 함수를 반환합니다.
  return {
    count,
    increment,
  };
}

import CountButton from './CountButton';
import useCounter from '../hooks/useCounter'; // Hook import
 
export default function Counter() {
  // [수정] 직접 useState를 쓰지 않고 Hook을 사용합니다.
  const { count, increment } = useCounter();
 
  return (
    <div>
      <p>현재 숫자: {count}</p>
      {/* 함수 이름이 handleClick에서 increment로 바뀌었음에 주의하세요 */}
      <CountButton label="+" onClick={increment} />
 
      {count >= 3 && (
        <p style={{ color: 'red' }}>
          숫자가 너무 커요!
        </p>
      )}
    </div>
  );
}

import { renderHook, act } from '@testing-library/react';
import useCounter from './useCounter';
import { describe, test, expect } from 'vitest';
 
describe('useCounter Hook 동작 테스트', () => {
  
  test('초기값은 0이며, increment 함수를 호출하면 값이 1 증가한다', () => {
    // 1. Hook 렌더링 (가상 환경)
    const { result } = renderHook(() => useCounter());
 
    console.log(`[Step 1] 초기값 확인: ${result.current.count}`);
    
    // 초기값 검증
    expect(result.current.count).toBe(0);
 
    // 2. 상태 변경 (act 사용 필수!)
    console.log('[Step 2] increment 함수 실행');
    act(() => {
      result.current.increment();
    });
 
    console.log(`[Step 3] 변경된 값 확인: ${result.current.count}`);
 
    // 3. 결과 검증
    expect(result.current.count).toBe(1);
  });
});

npm test

[Step 1] 초기값 확인: 0
[Step 2] increment 함수 실행
[Step 3] 변경된 값 확인: 1
 
 PASS  src/hooks/useCounter.test.ts
 PASS  src/components/Counter.test.tsx

git clone https://github.com/PROMLEE/my-tdd-app.git
cd my-tdd-app
git checkout part7