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-ed。在调试期间，这些函数会返回一个 Promise，该 Promise 只有在您继续执行到下一步时才会解析。

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

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