React Router Data Mode 테스트: Vitest 및 React Testing Library 사용법
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- React 및 React Router를 사용하는 개발자
- UI 테스트와 약한 점을 파악하고자 하는 중급 이상 개발자
- 테스트 자동화와 도구 사용에 관심 있는 프론트엔드 개발자
핵심 요약
- Vitest와 React Testing Library를 사용해 React Router Data Mode의 테스트 환경을 구축
createRoutesStub
을 활용한 UI 테스트 및 상태 시뮬레이션- Optimistic UI 테스트를 위해
action
의 지연 시간을 시뮬레이션 - 접근성 향상을 위해
aria-label
사용 강조
섹션별 세부 요약
1. 테스트 환경 설정
- Vitest, jsdom, React Testing Library 등 필요한 의존성을 설치
vite.config.ts
에 Vitest 설정 추가 (환경: jsdom,setupFiles
지정)tsconfig.app.json
에서 Vitest 전역 타입 및 모듈 설정
2. 연락처 페이지 테스트
createRoutesStub
을 사용해 라우트 스텁 생성 및loader
데이터 시뮬레이션- UI 상태 (예: 스켈레톤, 로딩 완료) 검증
- UI 테스트에 집중하고
loader
로직은 별도 테스트로 분리
3. 폼 테스트
- 필수 필드 검증 및 유효성 에러 표시 테스트
- 유효한 데이터 제출 시 에러 없음 검증
userEvent
라이브러리로 UI 상호작용 시뮬레이션
4. 연락처 상세 보기 및 Optimistic UI 테스트
children
과action
을 포함한 라우트 스텁 생성action
의 지연 시간을 사용해 Optimistic UI 동작 검증- 접근성 향상을 위해
aria-label
추가 및 테스트
결론
- 테스트는 UI 중심으로 간단하게 작성하고, 로직 테스트는 별도로 수행
- Vitest와 React Testing Library를 사용해 UI 상태 및 상호작용을 효과적으로 검증
- 접근성 향상을 위해
aria-label
사용을 필수적으로 적용