더핑크퐁컴퍼니 기술 블로그 - Medium · 2022. 06. 14.

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

AI 엔지니어링 브리핑

이 글은 GraphQL과 react-query를 사용하는 프론트엔드에서 실제 서버 없이도 네트워크 요청과 다양한 화면 상태를 안정적으로 테스트하는 방법으로 MSW를 소개합니다.

문제 & 배경

문제 & 배경: 기존에는 Apollo Client의 MockedProvider를 사용했지만, 새 프로젝트에서는 react-query와 GraphQL을 함께 쓰면서 단순 훅 테스트를 넘어 API 응답에 따른 로딩·오류·화면 렌더링까지 검증할 방법이 필요했습니다.

기술 & 해결책

기술 & 해결책: MSW는 서비스 워커를 이용해 실제 네트워크 요청을 중간에서 가로채고 미리 정한 응답을 돌려주므로, 실제 서버 없이도 fetch나 axios 같은 통신 방식과 네트워크 상황을 포함해 테스트할 수 있게 합니다.

교훈 & 주의점

교훈 & 주의점: 네트워크 수준에서 API를 흉내 내면 실제 사용 흐름에 가까운 테스트가 가능하며, MSW가 사용하는 서비스 워커는 보안상 HTTPS에서만 동작한다는 점을 고려해야 합니다.

내용이 비슷해요

내용이 비슷한 글을 먼저 보여드려요. 같은 문제나 해결책을 다룬다는 뜻은 아니에요.