MSW 모킹 코드 재사용하기 feat. Storybook, Jest
프론트엔드
MSW 모킹 코드 재사용하기 feat. Storybook, Jest
두줄요약
Storybook 스토리에 선언한 MSW 핸들러를 Custom Render로 Jest 테스트에서 재사용했습니다. 테스트 후 핸들러 초기화와 Node.js 절대 URL 처리 방법도 소개합니다.
문제 상황
- Storybook 스토리와 Jest 테스트에서 동일한 MSW 핸들러를 중복 정의하는 구조
- 테스트별 모킹 상태가 다른 테스트에 영향을 주지 않아야 하는 요구
해결 방법
@storybook/testing-react의composeStories로 스토리 컴포넌트와 args 재사용- Custom Render에서
story.type.parameters.msw.handlers를 읽어server.use()로 자동 적용 - 테스트 후
server.resetHandlers()로 런타임 핸들러 초기화
구조와 흐름
- Storybook 스토리에 MSW 핸들러를 선언하고
msw-storybook-addon데코레이터로 적용 - Jest에서 스토리를 렌더링할 때 래핑된 render가 스토리 핸들러를 등록
- Testing Library 검증 코드에서 모킹 설정 코드 제거
주의할 점
- Node.js 환경의 MSW 요청 매칭에 필요한 절대 URL 제약
- Tagged Template Literal로 Node.js에서만 호스트 prefix를 붙여 상대 경로 유지
