85,947
文档
Storybook 文档

单元测试中的 Stories

团队使用不同的工具测试各种 UI 特性。每个工具都需要您一遍又一遍地复制相同的组件状态。这是一个维护难题。理想情况下，您应该类似地设置测试，并在工具之间重用它。

Storybook 使您能够隔离组件并在 *.stories.js|ts 文件中捕获其用例。Stories 是标准的 JavaScript 模块，与整个 JavaScript 生态系统交叉兼容。

Stories 是 UI 测试的实用起点。将 stories 导入到 Jest、Testing Library、Vitest 和 Playwright 等工具中，以节省时间和维护工作。

使用 Testing Library 编写测试

Testing Library 是一套用于基于浏览器的组件测试的辅助库。借助 Component Story Format，您的 stories 可以与 Testing Library 重复使用。每个命名的导出（story）都可以在您的测试设置中呈现。例如，如果您正在处理登录组件并想要测试无效凭据场景，以下是如何编写测试的方法

Storybook 提供了一个 composeStories 实用程序，可帮助将测试文件中的 stories 转换为可在 JSDOM 的 Node 测试中重用的可渲染元素。它还允许您将您在项目中启用的其他 Storybook 功能（例如，装饰器、args）应用到您的测试中，使您能够在您选择的测试环境（例如，Jest、Vitest）中重用您的 stories，确保您的测试始终与您的 stories 同步，而无需重写它们。这就是我们在 Storybook 中所说的可移植 stories。

Form.test.ts|tsx
import { fireEvent, render, screen } from '@testing-library/react';
 
import { composeStories } from '@storybook/react';
 
import * as stories from './LoginForm.stories'; // 👈 Our stories imported here.
 
const { InvalidForm } = composeStories(stories);
 
test('Checks if the form is valid', async () => {
  // Renders the composed story
  await InvalidForm.run();
 
  const buttonElement = screen.getByRole('button', {
    name: 'Submit',
  });
 
  fireEvent.click(buttonElement);
 
  const isFormValid = screen.getByLabelText('invalid-form');
  expect(isFormValid).toBeInTheDocument();
});

您必须配置您的测试环境以使用可移植 stories，以确保您的 stories 与 Storybook 配置的所有方面（例如 装饰器）组合在一起。

一旦测试运行，它将加载 story 并渲染它。Testing Library 然后模拟用户的行为并检查组件状态是否已更新。

覆盖 story 属性

默认情况下，setProjectAnnotations 函数会将您在 Storybook 实例中定义的任何全局配置（即，preview.js|ts 文件中的参数、装饰器）注入到您现有的测试中。然而，这可能会为不打算使用这些全局配置的测试带来不可预见的副作用。例如，您可能希望始终在特定区域设置（通过 globalTypes）中测试 story，或者配置 story 以应用特定的 decorators 或 parameters。

为避免这种情况，您可以通过扩展 composeStory 或 composeStories 函数来覆盖全局配置，以提供特定于测试的配置。例如

Form.test.js|ts
// Replace your-renderer with the renderer you are using (e.g., react, vue3, svelte, etc.)
import { composeStories } from '@storybook/your-renderer';
 
import * as stories from './LoginForm.stories';
 
const { ValidForm } = composeStories(stories, {
  decorators: [
    // Decorators defined here will be added to all composed stories from this function
  ],
  globalTypes: {
    // Override globals for all composed stories from this function
  },
  parameters: {
    // Override parameters for all composed stories from this function
  },
});

在单个 story 上运行测试

您可以使用 composeStory 函数来允许您的测试在单个 story 上运行。但是，如果您依赖此方法，我们建议您向 composeStory 函数提供 story 元数据（即，默认导出）。这确保了您的测试可以准确确定有关 story 的正确信息。例如

Form.test.ts|tsx
import { fireEvent, screen } from '@testing-library/react';
 
import { composeStory } from '@storybook/react';
 
import Meta, { ValidForm as ValidFormStory } from './LoginForm.stories';
 
const ValidForm = composeStory(ValidFormStory, Meta);
 
test('Validates form', async () => {
  await ValidForm.run();
 
  const buttonElement = screen.getByRole('button', {
    name: 'Submit',
  });
 
  fireEvent.click(buttonElement);
 
  const isFormValid = screen.getByLabelText('invalid-form');
  expect(isFormValid).not.toBeInTheDocument();
});

将多个 stories 组合成一个测试

如果您打算在单个测试中测试多个 stories，请使用 composeStories 函数。它将处理您指定的每个组件 story，包括您定义的任何 args 或 decorators。例如

Form.test.ts|tsx
import { fireEvent, screen } from '@testing-library/react';
 
import { composeStories } from '@storybook/react';
 
import * as FormStories from './LoginForm.stories';
 
const { InvalidForm, ValidForm } = composeStories(FormStories);
 
test('Tests invalid form state', async () => {
  await InvalidForm.run();
 
  const buttonElement = screen.getByRole('button', {
    name: 'Submit',
  });
 
  fireEvent.click(buttonElement);
 
  const isFormValid = screen.getByLabelText('invalid-form');
  expect(isFormValid).toBeInTheDocument();
});
 
test('Tests filled form', async () => {
  await ValidForm.run();
 
  const buttonElement = screen.getByRole('button', {
    name: 'Submit',
  });
 
  fireEvent.click(buttonElement);
 
  const isFormValid = screen.getByLabelText('invalid-form');
  expect(isFormValid).not.toBeInTheDocument();
});

故障排除

在其他框架中运行测试

Storybook 为其他框架（如 Vue 2 和 Angular）提供了社区主导的插件。但是，这些插件仍然缺乏对最新稳定 Storybook 版本 的支持。如果您有兴趣提供帮助，我们建议使用默认的沟通渠道（GitHub 和 Discord 服务器）联系维护人员。

args 未传递到测试

composeStories 或 composeStory 返回的组件不仅可以渲染为 React 组件，而且还带有来自 story、meta 和全局配置的组合属性。这意味着，如果您想访问 args 或参数，例如，您可以这样做

Button.test.ts|tsx
import { render, screen } from '@testing-library/react';
 
import { composeStories } from '@storybook/react';
 
import * as stories from './Button.stories';
 
const { Primary } = composeStories(stories);
 
test('reuses args from composed story', () => {
  render(<Primary />);
 
  const buttonElement = screen.getByRole('button');
  // Testing against values coming from the story itself! No need for duplication
  expect(buttonElement.textContent).toEqual(Primary.args.label);
});

了解其他 UI 测试

此页面有用吗？
✍️ 在 Github 上编辑