Storybook에서 MSW(Mock Service Worker) 사용하기

API를 Mocking 하기 위해 MSW를 사용하고 있다.

MSW는 화면 개발할 때만 쓰일 거 같아서 딱히 스토리북까지는 세팅을 안 해줬는데 개발하다 보니 필요해졌다.

 

✏️ 설정이 필요한 이유

나의 경우에는 현재 게임 카드 리스트를 띄우는 탐색 페이지를 개발 중이다.

게임 카드들의 경우 선택한 태그(장르)를 기반으로 결과를 필터링할 수 있다.

 

태그 선택 버튼(태그 +)을 클릭하면 

 

조회하고 싶은 장르의 태그들을 선택할 수 있는 모달을 띄어야 한다.

 

여기서 띄어지는 태그들은 백엔드에서 응답받은 정보이다.

현재는 백엔드 API가 나오지 않았기 때문에 MSW 핸들러 정보로 띄우고 있다.

그렇기 때문에 스토리북에 MSW를 연결하지 않으면 저 정보들을 띄울 수 없었다.

No QueryClient set, use QueryClientProvider to set one The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them: Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation

 

✏️ 설정하기

스토리북에서 MSW를 사용하기 위해서는 먼저 아래 패키지를 설치해야 한다.

npm i msw msw-storybook-addon -D

 

그후에 .storybook/preview.tsx 파일을 수정한다.

import type { Preview } from '@storybook/nextjs';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { initialize, mswDecorator } from 'msw-storybook-addon';
import { handlers } from '../src/mocks/handlers';

initialize();

const preview: Preview = {
  parameters: {
    msw: {
      handlers: [...handlers],
    },
  }
  decorators: [
    mswDecorator,
    (Story) => {
      const queryClient = new QueryClient();
      return (
        <QueryClientProvider client={queryClient}>
          <Story />
        </QueryClientProvider>
      );
    },
  ],
};

export default preview;

관련 없는 부분은 지우고 msw랑 관련 있는 부분만 남겨서 가져왔다.

자기 코드에 맞게 필요한 부분만 추가하면 된다.

MSW 핸들러의 경우 각 스토리 파일에서 직접 작성해 줘도 되지만, 나는 기존에 작성한 handlers 내용을 그대로 쓰고 싶어서 임포트 해줬다.

 

이제 스토리북에서도 태그 정보들이 잘 띄어진다!

 

Storybook integrations