使用 storybook-addon-mock

storybook-addon-mock 是一个用于在 Storybook 中模拟数据的插件。它可以帮助开发人员在开发过程中快速创建模拟数据，并将其集成到 Storybook 中，以便进行测试和演示。

使用 storybook-addon-mock，你可以在 Storybook 配置文件中定义你的模拟数据，并通过 Storybook UI 的 Mocks 面板进行访问。你可以定义不同的模拟数据场景，并根据需要在不同的故事中使用它们。

要使用 storybook-addon-mock，你需要首先安装它，然后在你的 Storybook 配置文件中导入它并将其添加到 addons 列表中。接下来，你可以使用它的 API 来定义你的模拟数据，例如：

import { addDecorator, addParameters } from '@storybook/react';
import { withMockProvider } from 'storybook-addon-mock';

addDecorator(withMockProvider);

addParameters({
  mockConfig: {
    'default': {
      'user': {
        'id': 1,
        'name': 'John Doe',
        'email': 'john.doe@example.com'
      }
    },
    'empty': {}
  }
});

在上面的例子中，我们定义了两个模拟数据场景：'default' 和 'empty'。在 'default' 场景中，我们定义了一个名为 'user' 的模拟数据对象。在 'empty' 场景中，我们没有定义任何数据。

要在故事中使用模拟数据，你可以使用 @mock 注解，并指定你要使用的场景和数据的键值，例如：

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

import MyComponent from './MyComponent';

const story = storiesOf('MyComponent', module);

story.add('default', () => {
  const user = mock('default', 'user');
  return <MyComponent user={user} />;
});

story.add('empty', () => {
  const user = mock('empty', 'user');
  return <MyComponent user={user} />;
});

在上面的例子中，我们使用了 @mock 注解来获取我们之前定义的 'user' 模拟数据。通过这种方式，我们可以在不同的故事中使用不同的模拟数据场景，以测试我们的组件的不同行为。