模拟提供者

组件可以从上下文提供者接收数据或配置。例如，一个样式化的组件可能会从 ThemeProvider 中访问其主题，或者 Redux 使用 React 上下文为组件提供访问应用程序数据的权限。要模拟提供者，您可以将组件包装在一个包含必要上下文的装饰器中。

.storybook/preview.tsx

import React from 'react';
 
import { Preview } from '@storybook/react';
 
import { ThemeProvider } from 'styled-components';
 
const preview: Preview = {
  decorators: [
    (Story) => (
      <ThemeProvider theme="default">
        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
        <Story />
      </ThemeProvider>
    ),
  ],
};
 
export default preview;

请注意上面的文件扩展名（.tsx 或 .jsx）。根据项目的设置，您可能需要调整预览文件扩展名以允许使用 JSX。

另一个示例，请参考 Storybook 入门教程的屏幕章节，我们使用模拟数据模拟 Redux 提供者。

配置模拟提供者

模拟提供者时，可能需要配置提供者以向各个故事提供不同的值。例如，您可能希望使用不同的主题或用户角色来测试组件。

一种方法是为每个故事分别定义装饰器。但是，如果您想象一个场景，您希望为每个组件创建浅色和深色主题的故事，这种方法很快就会变得很麻烦。

更好的方法是，通过更少的重复，您可以使用装饰器函数的第二个“上下文”参数访问故事的参数并调整提供的值。这样，您就可以定义一次提供者并为每个故事调整其值。

例如，我们可以调整上面的装饰器以从parameters.theme中读取以确定要提供的主题。

.storybook/preview.tsx

import React from 'react';
 
import type { Preview } from '@storybook/react';
import { ThemeProvider } from 'styled-components';
 
// themes = { light, dark }
import * as themes from '../src/themes';
 
const preview: Preview = {
  decorators: [
    // 👇 Defining the decorator in the preview file applies it to all stories
    (Story, { parameters }) => {
      // 👇 Make it configurable by reading the theme value from parameters
      const { theme = 'light' } = parameters;
      return (
        <ThemeProvider theme={themes[theme]}>
          <Story />
        </ThemeProvider>
      );
    },
  ],
};
 
export default preview;

现在，您可以在故事中定义一个theme参数以调整装饰器提供的主题。

Button.stories.ts

import type { Meta, StoryObj } from '@storybook/react';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
};
export default meta;
 
type Story = StoryObj<typeof Button>;
 
// Wrapped in light theme
export const Default: Story = {};
 
// Wrapped in dark theme
export const Dark: Story = {
  parameters: {
    theme: 'dark',
  },
};

这种强大的方法允许您以灵活且可维护的方式向组件提供任何值（主题、用户角色、模拟数据等）。