userEvent와 fireEvent

 

Jest에서 컴포넌트 내부 이벤트 트리거를 테스트 하는 가장 일반적인 함수 두가지 userEvent와 fireEvent에 대해서 알아보자.

1. fireEvent

이벤트 객체를 생성하여 해당 이벤트를 컴포넌트에 트리거 시키는 함수
fireEvent는 컴포넌트의 이벤트 핸들러를 직접 호출하기 때문에 컴포넌트 내부의 특정 코드 경로를 테스트하는데에 적합하다.

ex) fireEvent.click(element)

2. userEvent

클라이언트의 인터렉션을 모방하는 동작을 하는 함수
* 실제 사용자가 웹 페이지나 애플리케이션과 상호작용하는 것과 유사한 동작을 수행한다.
즉, fireEvent보다 사용자의 행위를 더 잘 시뮬레이션한다고 생각하면 되고 사용자의 행위에 따른 결과를 테스트하는 데에 더 적합하다고 할 수 있다.

😘 주의할 점은 비동기 함수로 만들어줘야한다는 점!

test("Checkbox enables button on first click and disables on second click", async () => {
  const user = userEvent.setup();

  render(<SummaryForm />);

  const checkbox = screen.getByRole("checkbox", {
    name: /terms and conditions/i,
  });
  const confirmButton = screen.getByRole("button", { name: /confirm order/i });

  await user.click(checkbox);
  expect(confirmButton).toBeEnabled();

  await user.click(checkbox);
  expect(confirmButton).toBeDisabled();
});​