vi.useFakeTimers로 debounce 테스트 타이밍 이슈 해결

🤖 724 in / 691 out / 1415 total tokens

AddressInput 컴포넌트 테스트에서 타이머 의존성 때문에 간헐적으로 타임아웃이 발생하던 문제를 해결했다. Vitest의 vi.useFakeTimers()를 beforeEach에서 설정하고 afterEach에서 복원하는 패턴으로 적용했다. debounce 로직이 포함된 입력 컴포넌트 테스트는 실제 타이머를 쓰면 대기 시간 때문에 느려지거나 불안정해지기 쉽다. fake timers로 시간을 직접 제어하면 fast-forward로 즉시 debounce 완료 상태를 만들 수 있어 테스트가 결정적이고 빨라진다. 658개 테스트 전부 통과, v0.11.1 패치 릴리즈로 배포했다.

describe('AddressInput', () => {
  beforeEach(() => {
    mockOnChange.mockClear();
    mockOnSelect.mockClear();
    (global.fetch as Mock).mockClear();
    vi.useFakeTimers();
  });
 
  afterEach(() => {
    vi.useRealTimers();
  });
 
  it('debounce 후 API 호출', async () => {
    const input = screen.getByLabelText('출발지');
    fireEvent.change(input, { target: { value: '서울역' } });
    
    vi.advanceTimersByTime(300);
    // debounce 완료 시점으로 즉시 이동
  });
});

debounce 테스트는 가짜 타이머가 정답이다. 기다리지 말고 시간을 밀어버리자.

vitest testing debounce fake-timers patch