---
type: snippet
tags: ['test', 'mocking', 'timers']
status: release
ctime: 2024-12-31
mtime: 2026-07-27
parent: '315'
---

타이머를 제어하기 위해 `vi.useFakeTimers`와 `vi.advanceTimersByTime`을 사용하기.

```tsx
describe('Countdown 컴포넌트', () => {
  beforeEach(() => {
    vi.useFakeTimers()
  })

  afterEach(() => {
    vi.useRealTimers()
  })

  test('타이머가 동작하며 시간을 업데이트한다.', () => {
    const endTime = new Date(Date.now() + 60000).toISOString()
    const renderChild = vi.fn(({ targetRef }) => (
      <div ref={targetRef} data-testid="countdown" />
    ))

    render(<Countdown end_at={endTime}>{renderChild}</Countdown>)

    expect(screen.getByTestId('countdown')).toBeEmptyDOMElement()

    act(() => {
      vi.advanceTimersByTime(10000)
    })

    expect(screen.getByTestId('countdown')).toHaveTextContent('00:00:50')

    act(() => {
      vi.advanceTimersByTime(50000)
    })

    expect(screen.getByTestId('countdown')).toHaveTextContent('00:00:00')
  })
})
```

---

- https://vitest.dev/guide/mocking
- https://vitest.dev/api/vi.html#fake-timers