storybook-addon-mock使用教程

要使用 storybook-addon-mock，你需要按照以下步骤进行设置：

1. 安装 storybook-addon-mock

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

2. 在你的 Storybook 配置文件中导入和添加 addon

在你的 Storybook 配置文件中，导入 storybook-addon-mock 并将其添加到 addons 列表中，例如：

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

export const decorators = [withMockProvider];

export const parameters = {
  mockConfig: {
    'default': {
      'user': {
        'id': 1,
        'name': 'John Doe',
        'email': 'john.doe@example.com'
      }
    }
  }
};

在上面的例子中，我们将 withMockProvider 添加到了 decorators 列表中，并定义了一个名为 'default' 的模拟数据场景和一个名为 'user' 的模拟数据对象。

3. 在故事中使用模拟数据

在你的故事中，你可以使用 @mock 注解来获取模拟数据，例如：

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

import MyComponent from './MyComponent';

export default {
  title: 'MyComponent',
  component: MyComponent,
};

export const Default = () => {
  const user = mock('default', 'user');
  return <MyComponent user={user} />;
};

在上面的例子中，我们使用 @mock 注解来获取我们之前定义的 'user' 模拟数据，并将其传递给 MyComponent 组件进行渲染。

4. 使用 Mocks 面板管理模拟数据

在 Storybook UI 中，你可以使用 Mocks 面板来管理你的模拟数据。在 Mocks 面板中，你可以查看和编辑你已定义的模拟数据场景和对象。

总的来说，storybook-addon-mock 是一个非常有用的插件，可以帮助你在开发过程中快速创建和管理模拟数据，并将其集成到 Storybook 中以进行测试和演示。