一個 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 產生 service worker。

請記住，這會影響您可以用於 API 呼叫的路徑。

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

例如，以下命令會在您專案的 api 資料夾內初始化一個 service worker。

npx msw init ./api --save

執行 Storybook 時，您必須將初始化 MSW service worker 的資料夾作為資源提供給 Storybook。如有需要，請參閱文件。

將擴充套件新增至您的專案

在 ./storybook/main.js 中的 storybook 設定中新增擴充套件

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

設定擴充套件

透過在 ./storybook/preview.js 中初始化 MSW 並提供 MSW loader，在 Storybook 中啟用 MSW

Storybook pre-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 service worker 的路徑

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，促使我們將這兩個擴充套件的功能結合在一起。