MSW 모킹 코드 재사용하기 feat. Storybook, Jest

이 글은 API 모킹 도구인 MSW(Mock Service Worker)를 Storybook과 Jest에서 효율적으로 재사용하는 방법을 다룹니다. Storybook을 사용하여 컴포넌트의 시각적 테스트를 진행할 때 MSW로 API 응답을 모킹하고, 이렇게 작성된 모킹 코드를 Jest 환경의 통합 테스트나 자동화 테스트에서도 그대로 재사용하는 아이디어를 제시합니다.

이를 통해 모킹 코드를 한 곳에서 관리하여 중복을 줄이고, 각 테스트 환경(Storybook, Jest)에서 API 모킹이 서로 영향을 주지 않도록 하여 깔끔하고 효율적인 테스트 환경을 구축할 수 있습니다. 주요 사용 도구로는 MSW, Storybook, Jest, Testing Library 등이 있으며, msw-storybook-addon과 @storybook/testing-react 애드온을 활용합니다.