Storybook 插件交互

Storybook 插件交互可以在 Storybook 中实现交互和测试的可视化调试。

安装

通过添加 @storybook/addon-interactions 依赖项来安装此插件

yarn add -D @storybook/addon-interactions @storybook/test

在 .storybook/main.js 中

export default {
  addons: ['@storybook/addon-interactions'],
};

请注意，@storybook/addon-interactions 必须列在 @storybook/addon-actions 或 @storybook/addon-essentials **之后**。

使用

交互依赖于 Vitest 和 Testing Library 的“检测”版本，您从 @storybook/test 而不是其原始包中导入这些版本。然后，您可以在 play 函数中使用这些库。

import { expect, fn, userEvent, within } from '@storybook/test';
import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
  args: {
    onClick: fn(),
  },
};

const Template = (args) => <Button {...args} />;

export const Demo = Template.bind({});
Demo.play = async ({ args, canvasElement }) => {
  const canvas = within(canvasElement);
  await userEvent.click(canvas.getByRole('button'));
  await expect(args.onClick).toHaveBeenCalled();
};

为了在插件面板中启用单步调试，对 userEvent.*、fireEvent、findBy*、waitFor* 和 expect 的调用必须使用 await。在调试期间，这些函数返回一个 Promise，直到您继续执行下一步才会解析。

虽然从技术上讲您可以使用 screen，但建议使用 within(canvasElement)。除了在找不到 DOM 元素时提供更好的错误消息外，它还可以确保您的 play 函数与 Storybook 文档兼容。

请注意，fn 函数会将间谍分配给您的参数，以便您可以断言调用。