핵심 요약
더핑크퐁컴퍼니가 MSW(Mock Service Worker)를 활용해 테스트 코드에서 네트워크 레벨의 API 요청을 모킹하는 방법과 그 이점을 소개합니다.
주요 특징
- Service Worker를 통해 네트워크 요청을 가로채고 Mock 응답을 반환
- 핸들러를 정의해 다양한 API 엔드포인트를 Mocking
- Node 환경에서도 Jest 테스트와 함께 MSW 서버 인스턴스 구성 및 setupTests.js 설정으로 사용 가능
- 실제 서버 의존성 없이 프론트엔드 UI 테스트의 신뢰성과 재현성 향상
적용 고려사항
- 서비스 워커는 보안 상의 이유로 HTTPS에서만 동작하므로 개발 환경에서도 HTTPS 구성이 필요할 수 있음
- Firefox 시크릿 모드에서 Service Worker API에 접근할 수 없고 IE에서 사용 불가 등 브라우저 간 호환성 제약이 존재
- 테스트 환경은 Node에서 진행되지만 MSW는 브라우저 기반 개념과의 차이가 있어 설정이 필요
- 핸들러 정의와 서버 인스턴스 구성을 통해 다양한 테스트 케이스를 체계적으로 관리해야 함
