MSW를 활용하는 Front-End 통합테스트

MSW(Mock Service Worker)를 Jest 기반 FE 통합 테스트에 도입한 카카오엔터테인먼트의 실전 경험담으로, API 의존성으로 인해 통합 테스트 작성이 어려운 문제를 MSW로 해결하는 과정을 검색 페이지 예시를 통해 단계별로 설명한다. React + TypeScript + testing-library 환경에서 4가지 테스트 패턴을 실제 코드와 함께 다룬다.

핵심 포인트

단위 테스트(유틸 함수, 작은 컴포넌트)는 문제없지만 여러 컴포넌트가 협력하는 통합 테스트는 실제 API 없이 작성이 구조적으로 어렵다는 근본 문제 제기
MSW는 API 요청을 가로채 사전 설정한 목업 데이터를 반환, 실제 서버 없이도 실제 API 호출처럼 통합 테스트 가능
기본 목업 세팅(handlers.ts, server.ts, setupTests)만으로 첫 번째 통합 테스트 성공 케이스 구현
server.use()를 활용한 런타임 동적 데이터 변경으로 단일 API에 대해 다양한 응답 시나리오 테스트 가능
빈 배열 등 엣지 케이스와 404 같은 네트워크 에러 시나리오를 MSW로 시뮬레이션하는 방법 포함
MSW 공식 홈페이지에 install·Define mocks·Integrate(Node) 설치 과정이 문서화되어 초기 세팅 비용이 낮음

상세 정리

MSW는 Service Worker를 이용해 브라우저·Node.js 환경 모두에서 네트워크 요청을 인터셉트하는 도구
검색 페이지 예시: SearchInput(입력) + SearchResultList(결과) 조합 컴포넌트를 통합 테스트 대상으로 사용
기존 방식에서는 axios 호출이 실패해 테스트 에러 발생, MSW 도입 후 동일 테스트 성공
디렉토리 구조: src/mocks/api/data(응답 데이터) + src/mocks/api(핸들러 파일)로 관심사 분리
handlers.ts에서 rest.get('/search', (_, res, ctx) => res(ctx.json(data))) 패턴으로 목업 핸들러 등록
server.use()로 특정 테스트에서만 응답 데이터를 오버라이드, 테스트 후 server.resetHandlers()로 초기화
동적 변경 예시: 정사각 앨범(rect) vs 둥근 앨범(rounded) 두 응답을 같은 API 경로에서 테스트
엣지 케이스 테스트: 빈 배열([]) 응답 시 "검색 결과 없음" 메시지 렌더링 여부 확인
네트워크 에러 테스트: ctx.status(404) 또는 ctx.networkError()로 오류 상황 시뮬레이션 후 에러 UI 렌더링 확인
setupTests.ts에서 beforeAll(서버 시작), afterEach(핸들러 리셋), afterAll(서버 종료) 설정으로 테스트 격리 보장
React + TypeScript + Jest(testing-library) 기반이나 MSW 자체는 환경 독립적으로 적용 가능

왜 읽나API에 의존하는 컴포넌트 통합 테스트를 처음 작성하려는 FE 개발자에게 MSW 도입의 why와 how를 실전 코드로 한 번에 보여주는 글이다.

카카오 엔터테인먼트 FE 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

MSW를 활용하는 Front-End 통합테스트

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다