핵심 요약
카카오엔터테인먼트가 MSW 모킹 코드를 Storybook과 Jest에서 재사용 가능하게 구성하고 런타임 적용 및 Custom Render 도입으로 중복 모킹과 사이드 이펙트를 최소화했습니다.
구현 방법
- Storybook용 msw-storybook-addon으로 전역 초기화 및 데코레이터 적용
- Jest에서 스토리의 MSW 핸들러 재사용을 위해 @storybook/testing-react 활용 및 server.use 적용
- Custom Render 래핑으로 렌더링 시점에 스토리 모킹 자동 적용하고, 테스트 간 모킹 이펙트 제거를 위한 초기화/정리 로직 적용
주요 결과
- 모킹 중복 제거로 테스트 코드 간결성 및 재사용성 크게 향상
- 스토리북과 Jest 간 모킹 일관성 확보 및 사이드 이펙트 관리 용이
- Node 환경의 URL 매칭 이슈를 Tagged Template Literal로 해결하는 방식 도입
