프론트엔드
react-testing-library 의 fireEvent 를 userEvent로 마이그레이션 하기 with Antd
두줄요약
fireEvent 기반 테스트를 userEvent로 전환하며 실제 사용자 상호작용을 반영했습니다. Ant Design 컴포넌트의 포인터 이벤트와 multiple select mocking 이슈를 해결했습니다.
문제 상황
- 사내 백오피스의
fireEvent기반 프론트엔드 테스트를 실제 사용자 상호작용에 가까운userEvent로 전환 - Ant Design의 Select·DatePicker처럼 네이티브 HTML 요소와 다른 구현에서 발생하는 테스트 제약
해결 방법
- 입력값 변경은
change대신type과clear로 사용자 입력 흐름 반영 - blur 검증은 직접 blur 이벤트 호출 대신 입력창 외부 클릭으로 포커스 이탈 재현
- Ant Design DatePicker의
pointer-events: none요소는userEvent.setup의pointerEventsCheck설정으로 처리
주의할 점
- userEvent v14 API의 Promise 반환에 따른
await기반 비동기 테스트 - 네이티브
select전용인selectOptions사용을 위한 Ant Design Select mocking - multiple select mock에서 첫 선택값인
value대신selectedOptions기반 전체 선택값 반영
적용해볼 점
- 구현 세부사항보다 화면에 드러나는 사용자 행위 중심의 BDT 테스트 작성
- UI 라이브러리 mock 작성 전 HTML 기본 동작과 요소 특성 점검
