storybook-addon-mock 详细教程

storybook-addon-mock 的使用相对简单，以下是使用该插件的详细教程：

1. 安装插件

在项目根目录中使用 npm 或 yarn 安装插件，命令如下：

npm install --save-dev storybook-addon-mock

或

yarn add --dev storybook-addon-mock

2. 设置插件

在项目中的 .storybook/main.js 文件中，添加以下代码：

module.exports = {
  addons: [
    'storybook-addon-mock/register'
  ]
}

这将注册 storybook-addon-mock 插件，并在 Storybook 中启用它。

3. 创建假数据

在组件的 stories 文件中，可以使用 storybook-addon-mock 提供的 `mock` 函数来创建假数据。例如：

import { mock } from 'storybook-addon-mock';

export default {
  title: 'MyComponent',
  parameters: {
    mockConfig: {
      name: 'myMock',
      defaults: {
        propA: 'defaultA',
        propB: 'defaultB',
      },
    },
  },
};

export const WithMock = () => (
  <MyComponent {...mock('myMock')} />
);

在上面的代码中，我们使用了 `mock` 函数来创建了一个名为 `myMock` 的假数据。然后在 `WithMock` story 中，我们传入了 `myMock` 数据，并将其传递给了 `MyComponent` 组件。

4. 配置假数据

storybook-addon-mock 还提供了一些配置选项来控制假数据的生成。通过在组件的 stories 参数中设置 `mockConfig` 属性，可以为每个组件设置默认的假数据配置。例如：

export default {
  title: 'MyComponent',
  parameters: {
    mockConfig: {
      name: 'myMock',
      defaults: {
        propA: 'defaultA',
        propB: 'defaultB',
      },
      options: {
        propA: {
          values: ['valueA', 'valueB', 'valueC'],
        },
        propB: {
          values: ['value1', 'value2', 'value3'],
        },
      },
    },
  },
};

在上面的代码中，我们为 `myMock` 数据设置了默认的 `propA` 和 `propB` 属性，并为这些属性提供了可选的值。

通过这些简单的步骤，就可以在 Storybook 中使用 storybook-addon-mock 插件来创建和配置假数据了。