fireEvent와 userEvent 구현체 살펴보기

목차

1. userEvent는 fireEvent를 사용하여 구현되어있었다.
2. userEvent는 async, await가 왜 필요한 것일까?

Testing Library를 공부하던 중 fireEvent와 userEvent의 다른점을 학습하면서 fireEvent는 왜 필요한 것일까라는 궁금증을 시작으로 탐구하게 되었다.

userEvent는 fireEvent를 사용하여 구현되어있었다.

이 두가지를 비교하거나 소개하는 오래된 글들을 보면 userEvent가 fireEvent로 구성되어있다고 이야기합니다. 하지만 이는 버전에 따라 맞을수도 있고 틀릴수도 있습니다.

• React-testing-library: fireEvent vs userEvent

먼저 fireEvent의 구현체를 확인해보겠습니다.

실제 fireEvent의 코드를 확인해보면 custom Event를 만들어 dipatchEvent하는 것을 확인하실 수 있습니다. 그리고 테스트 코드를 작성자가 이를 호출하게 됩니다. 즉, 하나의 Event가 실행되도록 되어있습니다.

• fireEvent의 dispatchEvent

다음으로 userEvent의 구현체를 확인해보겠습니다.

userEvent의 코드를 확인해보면 fireEvent와 동일하게 customEvent를 dispatch하는 코드로 이루어져있는 것을 확인할 수 있습니다. 하지만 테스트 코드 작성자가 이 customEvent를 호출하는 것은 아니고, Testing Library에서 만들어놓은 api를 통해 이벤트의 묶음을 실행하게 됩니다. 예를 들어 어떤 input에 사용자가 입력하는 것을 테스트하고 싶다고 가정해보겠습니다. fireEvent는 이벤트 호출을 통해 input에 값을 주입한다면 userEvent는 해당 값을 하나하나 사용자가 타자친다고 생각하고 동작을 하게 됩니다. 그래서 keyboard와 관련된 api를 보시면 하나의 글자마다 keydown, keyup을 실행하는 것을 보실 수 있습니다.

• userEvent의 dispatchEvent
• e.g. keyboard event sequence

그럼 userEvent는 fireEvent로 이루어져있는다는 이야기는 어떤 것일까요?

앞서 말씀드린대로 버전에 따라서 맞고 틀림이 정해집니다. 정확히는 2022년 2월 3일의 #4720ac2 커밋 시점이 기준이 됩니다. 이때는 Testing Library 의 userEvent 라이브러리가 14Beta 버전이 최신이었던 때입니다. 이후 2022년 3월 29일 14버전으로 정식 업데이트 되었습니다.

userEvent는 async, await가 왜 필요한 것일까?

fireEvent와 userEvent가 동일하게 customEvent와 dispatchEvent를 이용해서 구현되어있다는 것을 같이 확인했습니다. 그런데 왜 userEvent에서 제공하는 api를 사용할 때는 async, await를 왜 필요하는지 의문이 들었습니다. 이 의문의 답은 해당 api가 Promise를 반환하기 때문인데 그럼 왜 Promise를 반환하는지가 궁극적으로 궁금했습니다. Testing Library의 github을 더 살펴보다가 흥미로운 내용의 issue를 발견했습니다. 비동기 렌더링과 관련된 이야기를 바탕으로 이벤트를 어떻게 다뤄야할지 논의하는 내용이었는데 자세한 내용은 링크를 통해 확인해보시면 도움이 되실거라 생각됩니다.

• Re-thinking approach to async event handling