프론트엔드
MSW 모킹 코드 재사용하기 feat. Storybook, Jest
두줄요약
Storybook 스토리의 MSW 핸들러를 Custom Render로 Jest 테스트에서 재사용했습니다. 테스트 간 핸들러 초기화와 Node.js 절대 경로 문제 해결 방법도 소개합니다.
문제 상황
- Storybook 스토리의 MSW 핸들러와 Jest 테스트의
server.use()모킹 코드 중복 - 테스트별 런타임 핸들러가 다른 테스트에 미치는 사이드 이펙트
- Node.js 환경에서 상대 경로 API 요청과 MSW 절대 경로 요구의 충돌
해결 방법
@storybook/testing-react의composeStories로 스토리 컴포넌트 재사용- Testing Library의
render를 래핑해story.type.parameters.msw.handlers를 렌더링 시점에server.use()로 등록 afterEach의server.resetHandlers()로 테스트 간 모킹 상태 초기화
구조와 흐름
- Storybook 스토리에 컴포넌트 args와 MSW 응답 핸들러 선언
- Jest에서 스토리를 변환한 뒤 Custom Render로 렌더링하여 스토리 핸들러 자동 적용
- Tagged Template Literal로 Node.js에서만 localhost 접두사를 추가해 상대 경로 표현 유지
적용해볼 점
- 시각적 테스트와 자동화 테스트의 API 응답 시나리오를 스토리 단위로 일원화
- 테스트 환경별 URL 문자열 차이를 태그 함수로 캡슐화
