RSS DEV 커뮤니티
팔로우
Jest와 React Query를 사용한 테스트에서 MSW로 엔드포인트 모킹하기
React Query 테스트에서 `useQuery`를 직접적으로 모킹하면 캐싱 및 자동 리패치와 같은 기능이 손상됩니다. MSW(Mock Service Worker)는 실제 엔드포인트를 시뮬레이션하여 더 나은 접근 방식을 제공합니다. 훅을 모킹하는 대신, MSW는 실제 요청(fetch/axios)을 가로채서 모킹된 응답을 반환하여 React Query의 로직을 보존합니다. MSW 설정에는 설치, 모킹된 응답을 정의하는 핸들러 생성, 테스트 서버 구성 및 Jest와의 통합이 포함됩니다. 실제 사용자 목록 컴포넌트를 테스트하는 실용적인 예제를 통해 로딩, 오류 및 성공 상태를 확인하는 방법을 보여줍니다. MSW를 사용하면 실제 API 통합 테스트, React Query의 전체 기능 활용, E2E 테스트에서의 유지보수 및 재사용 용이성 등의 이점을 얻을 수 있습니다. 이 접근 방식은 실제 시나리오를 반영하여 더 안정적이고 유지보수 가능한 테스트를 보장합니다. 훅 대신 엔드포인트를 모킹하는 것이 강력하고 현실적인 React Query 테스트를 위한 모범 사례입니다. 이를 통해 테스트는 현실에 더 가까워지고, 더 안정적이며, 발전하기 쉬워집니다.
