Storybook 擴充功能手動模擬

Storybook 手動模擬擴充功能可以用來模擬你的導入，如同 Jest 中的手動模擬

開始使用

透過新增 storybook-addon-manual-mocks 依賴來安裝此擴充功能

yarn add -D storybook-addon-manual-mocks

# or

npm install --save-dev storybook-addon-manual-mocks

在 .storybook/main.js 中

適用於 vite 和 webpack 的通用配置

module.exports = {
  addons: [
    {
      name: "storybook-addon-manual-mocks",
      options: {
        mocksFolder: "__mocks__",
      }
    }
  ],
};

特定的 vite 配置

module.exports = {
  addons: [
    {
      name: "storybook-addon-manual-mocks/vite",
      options: {
        mocksFolder: "__mocks__",
      }
    }
  ],
};

特定的 webpack 配置

module.exports = {
  addons: [
    {
      name: "storybook-addon-manual-mocks/webpack",
      options: {
        mocksFolder: "__mocks__",
      }
    }
  ],
};

可用的 options

名稱	類型	預設值	描述
mocksFolder	字串	"__mocks__"	自訂模擬資料夾

如何使用

您可以將伺服器查詢從組件中提取到鉤子並模擬這些檔案

MyComponent
├── __mocks__
│   └── MyComponent.hooks.js
├── MyComponent.component.js
├── MyComponent.stories.js
├── MyComponent.hooks.js
└── index.js

當您在 MyComponent.component.js 中導入 MyComponent.hooks 時，將會使用 __mocks__ 目錄中的檔案

import { useSomeData } from 'MyComponent.hooks';
// it will import mock under the hood '__mocks__/MyComponent.hooks';

重要

此擴充功能僅適用於相對導入 (./ 或 ../)，例如

// ✅ this CAN be mocked
import { useSomeData } from './MyComponent.hooks';

// ✅ this CAN be mocked
import { useSomeData } from '../MyComppnent/MyComponent.hooks';

// ⛔️ this CAN'T be mocked
import { useSomeData } from '@monorepo/components/MyComponent/MyComponent.hooks';

// ✅ this CAN be mocked
// Because inside the package, MyComponent.hooks was imported relatively
// `./MyComponent.hooks` by `MyComponent/index.js`, so it will be mocked correctly
import { useSomeData } from '@monorepo/components';