React 如何进行单元测试和集成测试？

1. 测试金字塔与 React 测试策略

React 应用的测试策略遵循测试金字塔原则：底层是大量的单元测试（快速、隔离、测试单个函数或组件），中间是有限的集成测试（测试多个模块协作），顶层是少量的端到端（E2E）测试（模拟真实用户操作流程）。

2. 单元测试工具链

• Jest：由 Meta 维护的 JavaScript 测试框架，提供测试运行器、断言库和 Mock 功能，是 React 生态中最主流的测试框架
• React Testing Library（RTL）：官方推荐的 React 组件测试库，核心理念是"以用户使用方式来测试组件"，通过角色（Role）、标签文本、占位符等用户可见的特征来查询 DOM 元素，而非测试组件内部实现细节
• Vitest：基于 Vite 的新一代测试框架，与 Vite 项目零配置集成，执行速度通常快于 Jest

3. 使用 React Testing Library 测试组件

RTL 提供 render() 函数将组件挂载到虚拟 DOM 中，通过 screen.getByRole()、screen.getByText() 等方法查询元素，通过 @testing-library/user-event 模拟真实的用户交互（点击、输入、选择等），最后使用 Jest 的 expect() 断言验证行为是否符合预期。

4. 自定义 Hooks 的测试

自定义 Hooks 需要借助 @testing-library/react 提供的 renderHook() API 进行测试：在测试环境中渲染一个调用目标 Hook 的微型组件，然后通过返回值验证 Hook 的状态管理和副作用行为是否正确。

5. 测试最佳实践

• 优先测试用户可感知的行为，而非组件内部状态结构
• 使用 getBy* 查询必须存在的元素，使用 queryBy* 断言元素不存在，使用 findBy* 处理异步出现的元素
• 避免测试实现细节（如不直接调用组件内部的 setState 或私有方法），这样在重构组件内部实现时测试不会失效
• 配合 jest --coverage 生成测试覆盖率报告，目标覆盖核心业务逻辑和边界条件