7관문. Testing with RenderHook

관문 7 / 7

renderHook과 act를 사용하여 useCounter 훅의 로직을 UI 없이 독립 검증하라.

📖 이론 비급

RenderHook: UI 없는 훅 테스트

@testing-library/react의 renderHook은 컴포넌트 없이 훅을 렌더링하고 검증할 수 있게 한다.

act로 상태 변경을 감싸면 모든 업데이트가 처리된 후 검증할 수 있다. 단위 테스트처럼 훅의 로직만 격리하여 TDD로 훅을 개발할 수 있다.

⚔️ 수련 코드

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

describe('useCounter', () => {
  test('초기값이 0이다', () => {
    const { result } = renderHook(() => useCounter());
    expect(result.current.count).toBe(0);
  });

  test('increment 호출 시 1 증가한다', () => {
    const { result } = renderHook(() => useCounter());
    act(() => result.current.increment());
    expect(result.current.count).toBe(1);
  });

  test('초기값을 지정할 수 있다', () => {
    const { result } = renderHook(() => useCounter(10));
    expect(result.current.count).toBe(10);
  });
});

// useCounter.js
export function useCounter(initialValue = 0) {
  // TODO: count, increment, decrement, reset을 반환하는 훅을 구현하라
}

Open Sandbox