Storybookの上でMSWが動くようにしたいんじゃ

import { initialize, mswLoader } from 'msw-storybook-addon'

// Initialize MSW
initialize()

const preview = {
  parameters: {
    // your other code...
  },
  // Provide the MSW addon loader globally
  loaders: [mswLoader],
}

export default preview

こんな感じでPreview.tsxを編集

てずか

mockServiceWorker.jsをStorybookから読み込むために、

staticDirs: ["../public"],

staticDirを指定してあげる必要があるらしい

てずか

コンポーネントのstoryにmswの設定を追加してみる

test-button.stories.ts

import type { Meta, StoryObj } from "@storybook/react";
import { expect, userEvent, within } from "@storybook/test";
import { http, HttpResponse } from "msw";
import { TestButton } from "./test-button";

const meta: Meta<typeof TestButton> = {
  component: TestButton,
};

export default meta;
type Story = StoryObj<typeof TestButton>;

export const Default: Story = {
  args: {
    title: "hoge",
    onClick: () => {
      fetch("/user");
    },
  },
  parameters: {
    msw: {
      handlers: [
        http.get("/user", () => {
          return HttpResponse.json({
            firstName: "Neil",
            lastName: "Maverick",
          });
        }),
      ],
    },
  },
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement);

    await userEvent.click(canvas.getByRole("button"));

    await expect(args.onClick).toHaveBeenCalled();
  },
};

てずか

できたっぽい