jest fake timer 사용시 userEvent.click 미동작 이슈

[j03y14]

문제 상황

beforeEach(() => {
    timeLimitMs = 10000;
    jest.useFakeTimers();

    render(
      <Timer
        timeLimit={timeLimitMs}
        initGame={initGame}
      />,
    );
  });

...

test('타이머 테스트', async () => {
    const startButton = screen.getByRole('button', { name: '시작' });

    await userEvent.click(startButton);

    act(() => {
      jest.advanceTimersByTime(1000);
    });

    const remainTimeView = screen.getByRole('remainTimeView');
    expect(remainTimeView).toHaveTextContent('9 초');
  });

이렇게 코드가 되어있을 때 테스트가 타임아웃 안에 안 끝나는 현상 발생.
콘솔을 찍어보면서 어디가 문제인지를 확인해봤더니 await userEvent.click()을 했을 때 클릭 이벤트 핸들러가 호출이 되지 않고 있었다.

관련이슈를 보니 userEvent 내부적으로 delay 옵션만큼 setTimeout을 이용해서 기다리고 있었다. 그런데 fake timer를 사용했기 때문에 userEvent의 setTimeout이 실행되지 않아서 이벤트가 호출되지 않은 것이다.

해결

1.

erEvent에서 옵션 중에 delay: null로 설정하면 setTimeout을 호출하지 않기 때문에 의도한 동작대로 테스트 수행이 가능했다.

const user = userEvent.setup({ delay: null });

2.

https://testing-library.com/docs/user-event/options/#advancetimers

fake timer를 사용할 때 delay를 실행시켜주기 위해서 advanceTimers 옵션을 줄 수 있다.

const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });

---

참조

• https://testing-library.com/docs/user-event/options/#delay
• https://testing-library.com/docs/user-event/options/#advancetimers
• https://marek-rozmus.medium.com/mocking-settimeout-with-jest-3fd6b8fa6307