MSW 사용하여 테스트 코드 작성하기 with GraphQL, react-query

더핑크퐁컴퍼니 웹개발팀이 GraphQL 과 react-query 조합의 새 프로젝트에서 테스트를 어떻게 할지 고민하다 MSW 로 API 를 모킹한 기록이다. 기존에는 Apollo Client 의 MockedProvider 를 썼지만, react-query 로 바뀌면서 훅 테스트만이 아니라 다양한 응답으로 렌더링된 요소까지 검증할 방법이 필요했다.

핵심 포인트

테스트 환경에서 실제 서버로 요청을 보내는 일은 드물다. 서버 API 의 동작 여부는 서버 쪽 관심사이고 직접 호출은 리스크를 만든다.
일반적인 모듈 모킹은 네트워크 레벨이 아니라 axios 나 fetch 를 쓸 수 없고, loading 이나 error 처럼 통신 중 상태에 맞춘 UI 를 온전히 테스트할 수 없다.
MSW 는 Service Worker 로 네트워크 요청을 가로채 모의 응답을 돌려주므로 Mock 서버 없이 네트워크 레벨 모킹이 된다.
Service Worker 는 메인 스레드와 다른 백그라운드 스레드에서 동작해 논블로킹이고, 모던 브라우저 표준 API 라 라이브러리 종속성 문제가 없다.
GraphQL 요청을 가로채려면 쿼리에 Operation name 을 반드시 붙이고 핸들러에도 같은 이름을 써야 한다.

상세 정리

MSW 는 백엔드 API 가 아직 없을 때 mock 데이터로 화면을 먼저 만드는 용도로도 쓸 수 있다.
제약도 짚는다. Service Worker 는 네트워크 요청을 수정할 수 있어 중간자 공격에 취약하므로 보안상 HTTPS 에서만 동작하고, Firefox 시크릿 모드에서는 접근할 수 없다.
설치는 msw 를 개발 의존성으로 넣고, 테스트 환경에서만 쓸 것이므로 그에 맞춘 폴더 구조를 만든다.
핸들러는 handlers 폴더에 기능별 파일로 두고 index 에서 한 번에 export 해 여러 개를 모아 쓴다.
테스트는 브라우저가 아닌 Node 환경에서 도는데 Service Worker API 는 브라우저 전용이다. MSW 는 Node 용 확장을 제공해 같은 핸들러로 server 인스턴스를 만들 수 있다.
Jest 환경이라 셋업 파일에 서버 시작과 종료, 핸들러 초기화 설정을 넣었다.
렌더링 테스트에 필요한 공통 세팅은 파일마다 반복하면 중복이 커지므로 customTestRenderer 로 묶어 제공한다.
user-event 도 기본 세팅이 여러 곳에서 같으므로 모듈화해 재사용한다.
예시는 유저 이름을 그리는 컴포넌트다. getUserInfo 쿼리의 Operation name 을 핸들러와 맞춰두면 MSW 가 요청을 가로채 모의 응답을 준다.
이번 프로젝트는 서버 API 가 거의 완성된 뒤 프론트 작업이 시작돼 브라우저 환경에서는 따로 쓰지 않았지만, 서버보다 먼저 프론트를 만들어야 할 때 완성도를 크게 높일 수 있다고 본다.