React Router Data Mode에서의 테스팅 전략: Vitest와 RTL을 활용한 UI 테스팅 심층 분석

핵심 기술

이 글은 React Router Data Mode를 사용한 애플리케이션에서 Vitest와 React Testing Library를 활용하여 UI 컴포넌트 및 라우팅 관련 로직을 효과적으로 테스트하는 방법을 다룹니다. 특히, 테스트 환경 설정부터 페이지, 폼, 디테일 뷰까지 구체적인 테스트 케이스 작성법을 제시합니다.

기술적 세부사항

• 테스트 환경 설정: Vitest, jsdom, @testing-library/react, @testing-library/dom, @testing-library/jest-dom, @testing-library/user-event 등 필수 라이브러리 설치 및 vite.config.ts, tsconfig.app.json 설정 방법을 안내합니다.
• react-router createRoutesStub 활용: 전체 앱을 마운트하지 않고도 특정 라우트와 컴포넌트, 로더를 포함하는 스텁(stub)을 생성하여 테스트 효율성을 높입니다.
• 페이지 테스트: ContactsPage의 'New' 버튼 렌더링 및 연락처 목록 로딩 시 스켈레톤 UI와 실제 데이터 표시를 검증하는 테스트를 작성합니다.
• 폼 테스트: ContactForm 컴포넌트에서 필수 필드 누락 시 유효성 검사 오류 메시지 표시 및 유효한 데이터 입력 시 오류가 없는 동작을 테스트합니다. 폼의 action은 UI 테스트에서 제외하고, 로직 테스트는 별도로 분리하는 것을 권장합니다.
• 중첩 라우트 및 Optimistic UI 테스트: ContactDetail 페이지와 같이 중첩된 라우트 구조를 createRoutesStub의 children 옵션을 사용하여 시뮬레이션하고, action 내 setTimeout을 통한 비동기 처리를 활용하여 Optimistic UI 변경 동작을 테스트합니다.
• 접근성 개선: aria-label 속성을 ContactCard 컴포넌트의 아이콘에 추가하여 react-testing-library의 접근성 기반 셀렉터를 활용한 테스트를 용이하게 합니다.

개발 임팩트

• 테스트 자동화를 통해 코드의 안정성을 높이고 버그 발생 가능성을 줄일 수 있습니다.
• 컴포넌트와 라우팅 로직에 대한 명확한 테스트 케이스를 확보하여 코드 유지보수성을 향상시킵니다.
• UI의 다양한 상태(로딩, 오류, 데이터 있음/없음)를 효과적으로 검증하여 사용자 경험을 개선합니다.
• 특히 Optimistic UI와 같은 고급 패턴의 동작을 안정적으로 테스트할 수 있습니다.

커뮤니티 반응

• (원문 내용에 커뮤니티 반응에 대한 언급은 없습니다.)