이전 글에선 React에서 MSW를 사용하는 방법을 알아보았다.
이번엔 Storybook에서 사용해보자

필요한 라이브러리 설치

1. msw-storybook-addon을 설치해준다.

npm i -D msw-storybook-addon

Storybook 설정 변경

preview.js

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

// Initialize MSW
initialize();

addDecorator(mswDecorator);

/* ... */

사용해보자

import { rest } from "msw";
import { ComponentMeta, Story } from "@storybook/react";
import { ComponentProps } from "react";
import TestComponent from "./TestComponent";

type Type = typeof TestComponent;
export default {
  title: "test/TestComponent",
  component: TestComponent,
} as ComponentMeta<Type>;

type Props = ComponentProps<typeof TestComponent>;

const Template: Story<Props> = (args) => <TestComponent {...args} />;

export const Default = Template.bind({});
Default.args = {};
Default.storyName = "TestComponent";

Default.parameters = {
  msw: {
    handlers: [
      rest.get(`/test/user`, (req, res, ctx) => {
        return res(ctx.json(userMockData));
      }),
    ],
  },
};

이렇게 하면 TestComponent에서 /test/user를 호출하면 userMockData에 있는 데이터가 나오게 된다. 너무 쉽죠?