react-slingshot 组件驱动开发测试：Storybook 与测试集成
项目地址: https://gitcode.com/gh_mirrors/re/react-slingshot 为什么需要组件驱动开发测试？
在 React 开发中，你是否遇到过这些问题：组件在不同页面复用时常出现样式冲突？多人协作时组件行为不一致？重构后难以验证所有组件功能是否正常？react-slingshot 作为一个成熟的 React + Redux starter kit（启动套件），提供了完整的组件测试解决方案。通过组件驱动开发（Component-Driven Development, CDD），你可以独立开发和测试每个组件，确保它们在任何场景下都能正常工作。
读完本文后，你将能够：
- 使用 Jest 和 Enzyme 为 react-slingshot 组件编写单元测试
- 理解组件测试文件与源代码的对应关系
- 掌握表单组件的交互测试方法
- 学会如何验证组件的条件渲染逻辑
组件测试基础：文件结构与规范
react-slingshot 采用测试文件与源代码共存的组织方式，所有测试文件以 .spec.js 为后缀，与被测试组件放在同一目录下。这种结构的优势在于：开发者可以在修改组件的同时直接更新测试，无需在不同文件夹间切换。
src/components/
├── FuelSavingsForm.js # 组件源代码
├── FuelSavingsForm.spec.js # 组件测试文件
├── FuelSavingsResults.js
├── FuelSavingsResults.spec.js
└── ...
官方文档：README.md 中详细介绍了这种测试组织方式的设计理念，强调测试应该作为代码的自然延伸而非额外负担。
从零开始：表单组件测试实例
以燃油经济性计算器中的核心组件 FuelSavingsForm.js 为例，我们来构建一个完整的组件测试方案。这个组件接收用户输入的油耗、油价和行驶里程等数据，计算并展示燃油节省金额。
测试框架与工具
react-slingshot 默认集成了以下测试工具：
- Jest：Facebook 开发的 JavaScript 测试框架，提供断言库、测试运行器和 Mock 功能
- Enzyme：Airbnb 开发的 React 测试工具，支持浅渲染（shallow）、完全渲染（mount）和静态渲染（render）三种方式
测试用例设计
一个完整的组件测试应该覆盖以下场景：
- 渲染测试：验证组件是否正确渲染所有子元素
- 交互测试：模拟用户输入和点击等操作
- 条件渲染测试：验证组件在不同状态下的展示逻辑
实战：编写 FuelSavingsForm 测试
首先，我们需要测试表单是否正确渲染了所有输入字段。打开 FuelSavingsForm.spec.js，可以看到以下测试代码：
it('should contain <FuelSavingsTextInput /> components', () => {
const fuelSavings = getFuelSavings();
const wrapper = shallow(<FuelSavingsForm
onSaveClick={jest.fn()}
onChange={jest.fn()}
fuelSavings={fuelSavings}
/>);
const allInputs = wrapper.find(FuelSavingsTextInput);
expect(allInputs.length).toEqual(5);
expect(allInputs.at(0).props().name).toEqual('newMpg');
expect(allInputs.at(0).props().value).toEqual(fuelSavings.newMpg);
// ... 验证其他输入字段
});
这段代码使用 Enzyme 的 shallow 方法浅渲染组件，然后查找所有 FuelSavingsTextInput 子组件，验证它们的数量和属性是否符合预期。浅渲染只渲染组件本身而不深入子组件，适合测试组件的结构而不依赖其子组件的实现细节。
交互测试：模拟用户输入
接下来测试用户输入交互。当用户在输入框中输入数值时，组件应该调用传入的 onChange 回调函数：
it('should call onChange when text input changes', () => {
const onChange = jest.fn(); // 创建 Mock 函数
const wrapper = shallow(<FuelSavingsForm
onSaveClick={jest.fn()}
onChange={onChange}
fuelSavings={getFuelSavings()}
/>);
const changeEvent = { target: { name: 'newMpg', value: '20' } };
expect(onChange).not.toBeCalled();
wrapper.find(FuelSavingsTextInput).first().simulate('change', changeEvent);
expect(onChange).toBeCalledWith(changeEvent);
});
这里使用 Jest 的 jest.fn() 创建一个 Mock 函数作为 onChange 回调，然后通过 Enzyme 的 simulate 方法模拟输入框的 change 事件。最后验证 Mock 函数是否被正确调用。
条件渲染：结果展示逻辑
FuelSavingsForm 组件只有在收集到足够数据时才会显示计算结果。我们需要测试这种条件渲染逻辑：
it('should contain <FuelSavingsResults /> when necessary conditions are met', () => {
const fuelSavings = getFuelSavings({
necessaryDataIsProvidedToCalculateSavings: true,
savings: {
monthly: 10,
annual: 120,
threeYear: 360
}
});
const wrapper = shallow(<FuelSavingsForm
onSaveClick={jest.fn()}
onChange={jest.fn()}
fuelSavings={fuelSavings}
/>);
const expected = <FuelSavingsResults savings={fuelSavings.savings} />;
expect(wrapper.contains(expected)).toBeTruthy();
});
当 necessaryDataIsProvidedToCalculateSavings 为 true 时，组件应该渲染 FuelSavingsResults 子组件并传入计算结果。
测试驱动开发(TDD)工作流
组件驱动开发推荐采用测试驱动开发流程，具体步骤如下：
- 编写测试：先为组件功能编写测试用例
- 运行测试：确认测试失败（红）
- 实现功能：编写组件代码使测试通过
- 重构优化：优化代码结构而不改变功能
- 再次测试：确保重构后测试仍然通过（绿）
这种 "红-绿-重构" 的循环可以帮助开发者专注于需求而非实现细节，同时保证代码始终有测试覆盖。
高级话题：测试覆盖率与持续集成
react-slingshot 提供了内置的测试覆盖率报告功能。运行以下命令可以生成详细的覆盖率报告：
npm run test:cover
该命令会在 coverage 目录下生成 HTML 格式的覆盖率报告，显示每个文件的测试覆盖情况。官方文档 docs/FAQ.md 中解释了如何配置和解读覆盖率报告。
总结与最佳实践
通过本文的学习，你已经掌握了在 react-slingshot 中进行组件驱动开发测试的核心方法。总结以下最佳实践：
- 测试文件与组件共存：保持测试与代码的紧密关联
- 使用浅渲染测试组件结构：避免测试依赖子组件
- 专注行为而非实现：测试组件的输入输出和交互行为，而非内部实现细节
- 模拟外部依赖：使用 Jest Mock 功能隔离外部依赖
- 渐进式测试：从简单场景开始，逐步增加测试复杂度
react-slingshot 的测试架构设计遵循了 React 社区的最佳实践，通过 src/components/containers/ 目录中的容器组件测试，你可以进一步学习如何测试连接 Redux 的复杂组件。
无论是开发小型应用还是大型系统，组件驱动开发测试都能显著提高代码质量和开发效率，减少回归错误，让你的 React 项目更加健壮和可维护。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
