MSW 모킹 코드 중복 해결: Storybook 스토리를 Jest 테스트에서 재사용하는 Custom Render 활용법

Storybook과 Jest 테스트 환경에서 MSW(Mock Service Worker) 모킹 코드가 중복되는 문제를 해결하기 위해, 스토리에 정의된 모킹을 Jest에서 재사용하는 방식을 제안한다. 기존에는 @storybook/testing-react를 통해 스토리 컴포넌트를 변환하더라도, Jest 테스트 코드 내에서 server.use()로 모킹 핸들러를 다시 작성해야 하는 번거로움이 있었다.

Custom Render를 통한 모킹 자동 적용

이 문제를 해결하기 위해 @testing-library/react의 render 함수를 래핑하는 Custom Render를 구현했다. 이 래퍼는 렌더링 시 스토리의 parameters.msw.handlers를 확인하여 자동으로 server.use()를 호출함으로써 테스트 코드에서 모킹 로직을 제거한다. 또한, 테스트 간 사이드 이펙트를 방지하기 위해 afterEach 훅에서 server.resetHandlers()를 호출하여 모킹 상태를 초기화한다.

Node.js 환경에서의 URL 경로 문제 해결

MSW는 Node.js 환경에서 절대 경로만 허용하므로, 상대 경로를 사용하는 애플리케이션 코드와 호환되지 않는 문제가 있다. 이를 해결하기 위해 Tagged Template Literal을 활용했다. detect-node 라이브러리를 사용하여 실행 환경이 Node.js일 때만 http://localhost 프리픽스를 붙이는 testUrl 함수를 정의하면, 애플리케이션과 테스트 코드 모두 상대 경로로 URL을 작성하면서도 MSW 모킹을 정상적으로 수행할 수 있다.