MSW를 활용한 GraphQL 및 react-query 테스트

서론

기존 프로젝트는 Apollo Client를 사용해 테스트를 진행했으나, 새로운 프로젝트에서는 GraphQL과 react-query를 활용하여 테스트를 진행합니다. 이를 위해 Mock Service Worker(MSW)를 채택했습니다.

MSW와 Service Worker

MSW는 네트워크 요청을 가로채서 mock 응답을 제공하는 API Mocking 라이브러리입니다. Service Worker를 통해 네트워크 요청을 가로채고 모의 응답을 반환하며, 이는 HTTPS에서만 동작합니다.

• MSW 설치: npm install msw --save-dev
• 핸들러 설정: 여러 핸들러를 정의하고 export

테스트 환경은 Node에서 진행하며, Jest를 사용해 테스트를 설정합니다. 마지막으로, UI 테스트를 위해 @testing-library/react와 user-event를 활용하여 렌더링 테스트와 유저 인터랙션 테스트를 진행합니다.