84,593
文档
Storybook 文档

单元测试中的故事

团队使用不同的工具测试各种 UI 特性。每个工具都需要你一遍又一遍地复制相同的组件状态。这是一件很麻烦的事情。理想情况下，你可以类似地设置测试并在工具之间重复使用。

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

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

用 Testing Library 编写测试

Testing Library 是一套用于基于浏览器的组件测试的辅助库。使用 组件故事格式，你的故事可在 Testing Library 中重复使用。每个命名导出（故事）都在你的测试设置中可渲染。例如，如果你正在处理登录组件并想测试无效凭据情况，以下是如何编写测试的示例

Storybook 提供了一个 composeStories 实用程序，它有助于将测试文件中的故事转换为可渲染的元素，这些元素可以在你的 JSDOM 节点测试中重复使用。它还允许你将已在项目中启用的其他 Storybook 功能（例如，装饰器、参数）应用到测试中，使你能够在选择的测试环境（例如，Jest、Vitest）中重复使用故事，确保你的测试始终与故事保持同步，而无需重新编写。这就是我们所说的 Storybook 中的可移植故事。

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();
});

你必须配置测试环境以使用可移植故事，以确保你的故事包含 Storybook 配置的所有方面，例如 装饰器。

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

覆盖故事属性

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

为了避免这种情况，你可以通过扩展 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
  },
});

在单个故事上运行测试

你可以使用 composeStory 函数来允许你的测试在单个故事上运行。但是，如果你依赖于这种方法，建议你将故事元数据（即，默认导出）提供给 composeStory 函数。这可以确保你的测试能够准确地确定有关故事的正确信息。例如

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();
});

将故事组合到一个测试中

如果你打算在一个测试中测试多个故事，请使用 composeStories 函数。它将处理你指定的每个组件故事，包括你定义的任何 参数 或 装饰器。例如

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 服务器）联系维护人员。

参数没有传递给测试

由 composeStories 或 composeStory 返回的组件不仅可以作为 React 组件渲染，而且还包含来自故事、元数据和全局配置的组合属性。这意味着如果您想访问参数或参数，例如，您可以这样做

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 上编辑