react如何测试

测试 React 组件

单元测试

• 使用 Jest 作为测试框架
• 配合 React Testing Library 测试组件渲染
• 测试 props 传递和状态变化

集成测试

• 测试多个组件交互
• 模拟用户事件（点击、输入等）
• 验证 DOM 更新是否符合预期

端到端测试

• 使用 Cypress 或 Puppeteer
• 模拟真实用户操作流程
• 测试完整应用功能

测试工具配置

Jest 配置

• 安装依赖：jest @testing-library/react
• 配置 setupTests.js 文件
• 添加 TypeScript 支持（如需要）

测试文件命名

• 与组件同目录：ComponentName.test.tsx
• 或集中放在 __tests__ 目录

测试模式

快照测试

• 捕获组件渲染结构
• 检测意外 DOM 变化
• 适合不频繁变更的组件

覆盖率报告

• 通过 --coverage 标志生成
• 检查未测试代码路径
• 设置合理覆盖率阈值

测试技巧

Mock 数据

• 模拟 API 响应
• 使用 jest.mock() 模拟模块
• 创建测试专用假数据

异步测试

• 处理组件生命周期
• 等待元素出现
• 正确处理 Promise

可访问性测试

• 集成 axe-core
• 自动检测 ARIA 问题
• 确保组件无障碍