Storybook项目中如何在单元测试中复用Stories组件

原创于 2025-05-30 09:02:14 发布 · 316 阅读

CC 4.0 BY-SA版权

Storybook项目中如何在单元测试中复用Stories组件

storybook 项目地址: https://gitcode.com/gh_mirrors/sto/storybook

什么是Stories复用

在现代前端开发中，组件测试是一个重要环节。传统做法是为每个测试工具(Jest、Testing Library等)单独编写测试用例，这会导致大量重复代码和维护负担。Storybook提供了一种优雅的解决方案：通过编写.stories.js|ts文件来定义组件的各种状态和用例，这些Stories可以在不同测试工具中复用。

为什么要在单元测试中使用Stories

减少重复代码：避免为不同测试工具重复编写相同的组件状态
保持一致性：确保测试环境和Storybook展示环境一致
提高维护性：当组件变更时，只需修改Stories文件
提升开发体验：直接在Storybook中预览测试用例

基础使用方法

1. 使用Testing Library测试Stories

Testing Library是一套用于浏览器交互测试的辅助库。结合Storybook的Component Story Format(CSF)，可以轻松在测试中复用Stories。

import { render, screen } from '@testing-library/react';
import { composeStories } from '@storybook/testing-react';
import * as stories from './LoginForm.stories';

// 将Stories转换为可测试组件
const { InvalidCredentials } = composeStories(stories);

test('显示无效凭证错误信息', async () => {
  // 渲染组件
  render(<InvalidCredentials />);
  
  // 测试逻辑
  const errorMessage = await screen.findByText(/无效凭证/i);
  expect(errorMessage).toBeInTheDocument();
});

2. 配置测试环境

为了确保Stories在测试中能正确加载所有配置(如装饰器、全局参数等)，需要在测试环境中设置：

import { setProjectAnnotations } from '@storybook/testing-react';
import * as globalStorybookConfig from '../.storybook/preview';

setProjectAnnotations(globalStorybookConfig);

高级用法

1. 覆盖Story属性

有时需要为特定测试覆盖全局配置：

const CustomTest = composeStory(InvalidCredentials, stories.default, {
  decorators: [
    (Story) => (
      <div style={{ padding: '20px', backgroundColor: 'lightgray' }}>
        <Story />
      </div>
    ),
  ],
});

2. 测试单个Story

import { composeStory } from '@storybook/testing-react';
import stories from './Button.stories';

const Primary = composeStory(stories.Primary, stories.default);

test('主按钮渲染正确', () => {
  const { container } = render(<Primary />);
  expect(container.firstChild).toMatchSnapshot();
});

3. 组合多个Stories测试

const { Primary, Secondary } = composeStories(stories);

test('所有按钮都渲染正确', () => {
  render(
    <>
      <Primary />
      <Secondary />
    </>
  );
  const buttons = screen.getAllByRole('button');
  expect(buttons).toHaveLength(2);
});

常见问题解决

参数未传递到测试中

const { Primary } = composeStories(stories);

test('检查参数传递', () => {
  render(<Primary />);
  // 访问story参数
  expect(Primary.args.label).toBe('Primary');
});