fire event vs user event

React testing library에서 이벤트를 발동시키는 방법에는 아래 두 가지가 있다.

1. fire-event
2. user-event

fire-event의 한계점

테스팅 라이브러리에 내장된 fire-event는 DOM 이벤트를 전송한다. 개발자가 모든 요소에서 모든 이벤트를 트리거할 수 있도록 해준다. 그러나, 일반적으로 하나의 상호작용에 한개 이상의 이벤트를 수행한다.

예를 들면 input 이벤트가 있다. 이메일의 유효성 검사를 테스트하는 로직을 작성하면 작성해야 하는 최소한의 로직은 다음과 같다.

1. input에 포커스한다.
2. 키보드 입력 이벤트가 발생한다.

fireEvent를 사용하면 값을 직접 변경한다. 빠르지만, 실제 유저가 상호작용하는 방식과 상대적으로 차이가 있다.
user event를 사용하면 위와 같은 직접적인 이벤트 대신, 사용자의 상호작용과 유사한 방식으로 상호작용한다. 테스트하는 요소가 현재 화면에 보이고, 상호 작용이 가능한지 테스트를 거친 후, 사용자기 직접 상호 작용을 하는 것처럼 DOM을 조작한다.

user-event 사용하기

컴포넌트가 랜더링 되기 전에, setup() 테스트 자체에서 수행하거나, 설정 함수를 통하여, 호출하는 것이 좋다. 또한 테스팅 시, 중첩을 피해야 하기 때문에 테스트마다 실행되는 beforeAll, AfterAll등의 함수 내부에 넣어 실행하지 않는 것이 바람직하다.

test("버튼을 클릭하면 ~~~한다.", async () => {
	const user = userEvent.setup();
    render(<MyComponent />)
    const button = screen.getByRole('button', {name: /click me!/i});

    await user.click(button);

	// 테스트 단언 작성
})

user event는 항상 Promise를 반환한다. 즉, user event를 사용할 때마다 비동기 처리를 해주어야 한다.