storybook에서 msw 사용하기

MSW란?

Mock Service Worker의 약자로 API를 Mocking 할 때 사용하는 도구
API 요청을 가로채는 Service Worker 기능을 사용하여 mocking 할 수 있다. 

 

---

 

로컬 서버는 key를 입력해서 들어가야 하는 등 번거로움이 있어 스토리북을 통해 개발을 하고 있었다.

그러던 중 API mocking이 필요해졌고, msw와 스토리북을 연동하기 위해 msw-storybook-addon을 설치했다.

 

npm i msw-storybook-addon -D

// or

yarn add msw-storybook-addon -D

 

하지만 스토리북에서 msw가 잘 작동하지 않았다.🥲

 

TypeError: Failed to update a ServiceWorker for scope ('http://localhost:6006/') with script ('http://localhost:6006/mockServiceWorker.js'): A bad HTTP response code (404) was received when fetching the script.

 

404 NOT FOUND와 함께 저런 에러 메시지가 등장했다. msw가 작동하지도 않았다.

 

만약 똑같은 문제를 만났다면 아래의 설명대로 하면 해결된다.

 

1) .storybook/preview.tsx에 `msw-storybook-addon`의 initialize, mswDecorator 사용

// preview.tsx

import { initialize, mswDecorator } from 'msw-storybook-addon';

initialize();

const preview: Preview = {
  parameters: {
    ...
  },
  decorators: [
    (Story) => (
      <>
        <GlobalStyle />
        <Story />
      </>
    ),
    mswDecorator,
  ],
}

 

2) parameters에 msw 추가

// preview.tsx

import { handlers } from '../src/mocks/handlers';

const preview: Preview = {
  parameters: {
    ...
    msw: {
      handlers: [...handlers],
    },
  },
  ...
}

 

3) .storybook/main.ts에 `staticDirs: ['../public']` 추가

// main.ts

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  staticDirs: ['../public'], // ⭐public 경로 추가!
  ...
}

 

이렇게 하면 성공적으로 스토리북과 msw가 연동된다. (나는 3번을 빼먹어서 오류가 난 것이었다...)