一个包含控制面板的 MSW（Mock Service Worker）插件，允许在 Storybook 中交互和操作模拟请求。

功能

• 与 MSW 版本保持最新 (2.2.8)

安装和设置

安装 MSW 和插件

使用 npm

npm i msw storybook-msw-addon -D

或使用 yarn

yarn add msw storybook-msw-addon -D

在项目文件夹中为 MSW 生成服务工作者。

请记住，这会影响您可以用于 API 调用的路径。

npx msw init ${path to project folder to be initialized by msw} --save

例如，以下命令将在项目的 api 文件夹中初始化一个服务工作者。

npx msw init ./api --save

运行 Storybook 时，您必须将初始化 MSW 服务工作者的文件夹作为资源提供给 Storybook。如有必要，请参考文档。

将插件添加到您的项目

将插件添加到 ./storybook/main.js 中的 Storybook 配置文件。

addons: [
    ...,
    "storybook-msw-addon",
  ],

配置插件

通过在 ./storybook/preview.js 中初始化 MSW 并提供 MSW 加载器来在 Storybook 中启用 MSW。

Storybook v8.2 之前的版本

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

// Initialize MSW
initialize();

// Provide the MSW addon loader globally. A loader runs before a story renders, avoiding potential race conditions.
export const loaders = [mswLoader];

Storybook v8.2 及更高版本

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

const preview: Preview = {
  beforeAll: async () => {
    initialize();
  },
  loaders: [mswLoader]
}

启动 Storybook

请记住提供 public 文件夹或您已初始化 MSW 服务工作者的路径。

npm run storybook

用法

将请求处理程序 (https://mswjs.io/docs/basics/request-handler) 传递到 msw 参数的 handlers 属性中。这通常是一个处理程序数组。

import { http, HttpResponse } from "msw";

export const SuccessBehavior = () => <UserProfile />;

SuccessBehavior.parameters = {
  msw: {
    handlers: [
      http.get(endpoint, () => {
        return HttpResponse.json({ results: results });
      }),
    ],
  },
};

高级用法

WIP -- 高级用例目前正在使用此插件的当前版本进行测试。

配置 MSW

如果要配置 storybook-msw--addon，可以将选项传递给 initialize 函数。

例如，如果希望 MSW 跳过未处理的请求，则可以使用 onUnhandledRequest: "bypass" 选项初始化插件。

// preview.js
import { initialize } from "storybook-msw-addon";

initialize({
  onUnhandledRequest: "bypass",
});

开发脚本

• yarn start 以监视模式运行 babel 并启动 Storybook
• yarn build 构建并打包插件代码

鸣谢

此插件的灵感来自 msw-storybook-addon 和 storybook-addon-mock，促使我们将这两个插件的功能结合在一个地方。