【Storybook7 / msw】import {"rest"} from "msw"でエラーが発生するも直す話

時期的に今しか起こらないエラーかもしれませんが、メモとして残します。

新規インストールしたStorybook7に、公式ドキュメントにしたがってmsw-storybook-addonを導入しようとしました。

公式ドキュメントにはこうありました。

npm i msw msw-storybook-addon -D

今現在(2023/11/02)、上記コマンドを実行するとmswが2系でインストールされてしまうため、正常に動作しません。

ですので、下記のようにします。

npm i msw@^1.3.2 msw-storybook-addon -D

以下、最低限のmsw実行のためのコード

preview.js

import {initialize, mswLoader} from "msw-storybook-addon" // 追加

initialize() // 追加

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  layout :"fullscreen"
}

export const loaders = [mswLoader] // 追加

HogeHoge.stories.tsx

import { HogeHoge } from "./HogeHoge"
import { StoryObj } from "@storybook/react";
import { rest } from "msw" // 追加

export default {
    title : "ほげほげ",
    component: HogeHoge,
};

type Story = StoryObj<typeof HogeHoge>;

export const Base : Story = {
    parameters : {
        // 追加
        msw : {
            handlers : [
                rest.get("/api/hogehoge", (req, res, ctx) => {
                    return res(
                        ctx.json({
                            items : [{
                                id : 100,
                                name : "hoge"
                            }, {
                                id : 200,
                                name : "fuga"
                            }]
                        })
                    )
                })
            ]
        }
    }
}