企业官网建设流程全解析

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

什么是Stories复用

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

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

1. 减少重复代码：避免为不同测试工具重复编写相同的组件状态
2. 保持一致性：确保测试环境和Storybook展示环境一致
3. 提高维护性：当组件变更时，只需修改Stories文件
4. 提升开发体验：直接在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'); });

跨框架支持

目前Storybook对React的支持最完善，其他框架(Vue、Angular等)可能需要使用社区插件或等待官方支持。

测试类型扩展

除了单元测试，Storybook Stories还可以用于：

1. 视觉测试：验证UI外观
2. 交互测试：模拟用户行为
3. 无障碍测试：检查可访问性
4. 端到端测试：模拟真实用户场景
5. 快照测试：捕获渲染差异

最佳实践建议

1. 保持Stories简洁，每个Story只展示一个特定状态
2. 为复杂组件编写多个Stories覆盖各种边界情况
3. 在测试中复用Stories而不是重新创建组件状态
4. 定期运行所有测试确保Stories保持最新
5. 结合Storybook的交互插件进行可视化测试

通过这种方式，开发者可以构建更健壮、更易维护的组件测试体系，同时提高开发效率。