프론트엔드
MSW를 활용하는 Front-End 통합테스트
두줄요약
MSW로 API 요청을 가로채는 React·Jest 기반 통합 테스트 구성을 소개했습니다. 정상·조건부·엣지·네트워크 오류 응답을 동적으로 검증할 수 있습니다.
문제 상황
- 통합 테스트에서 실제 서버 API 의존으로 개발 중이거나 원하는 응답을 주지 않는 API 검증 불가
- 더미 데이터 구성과 다수 API 모킹에 따른 높은 테스트 작성 비용
해결 방법
- MSW로 API 요청을 가로채고 사전 정의한 목업 응답 반환
- Jest 환경에 handlers, server, setup 파일 구성 후 REST 핸들러 등록
server.use로 테스트별 응답 데이터와 HTTP 상태를 런타임에 재정의
구조와 흐름
- 검색어 입력·엔터 이벤트 후
/search요청과 검색 결과 렌더링 검증 - 정상 응답, 앨범 타입별 조건부 렌더링, 빈 목록, 404 네트워크 오류 시나리오 테스트
- 오류 응답은
try/catch또는 axios interceptor 기반 에러 처리와 연결
적용해볼 점
- 서버 API 개발 전에도 합의된 API 스펙 기반 프론트엔드 통합 테스트 작성
- 변경 API 스펙을 목업에 선반영해 기존 코드 정합성 점검
- Storybook 및 개발 서버 환경으로 MSW 활용 범위 확장
