프론트엔드
MSW 사용하여 테스트 코드 작성하기 with GraphQL, react-query
두줄요약
MSW로 GraphQL·react-query 요청을 네트워크 수준에서 모킹하는 Jest 테스트 구성을 소개했습니다. 공통 렌더러와 핸들러로 응답별 UI를 검증하는 방법을 설명합니다.
구조와 흐름
- MSW 핸들러로 GraphQL Query와 응답 데이터 사전 정의
- Node 테스트 환경의 server instance와 Jest 생명주기 연결
- 공통 Renderer·userEvent 설정 후 API 응답 기반 UI 렌더링 검증
선택 이유
- 실제 서버 요청 없이 네트워크 수준 API request·response mocking
- loading·error 등 네트워크 상황별 UI 테스트 가능
- Service Worker 기반 표준 API 활용과 메인 스레드 비차단 처리
주의할 점
- GraphQL 요청 가로채기를 위한 Query Operation name 일치 필요
- Service Worker의 HTTPS 제약, Firefox 시크릿 모드 접근 제한, IE 미지원
- Node 환경에서 Service Worker 대신 HTTP 또는 XMLHttpRequest 확장 방식 활용
적용해볼 점
- 백엔드 API 미완성 상태의 MockData 기반 프론트엔드 화면 개발
- react-query 훅 단위 테스트를 넘어 다양한 API 응답별 컴포넌트 테스트
