TypeScript 测试规则（前端）

TypeScript 测试规则（前端）

前置条件检测

在选择框架或命令之前，先检查 package.json、锁文件、测试配置以及现有测试的 import。仅在依赖/配置确实存在时才应用 Vitest、React Testing Library、MSW 或 Playwright 的规则。若仓库配置了不同的等效工具，则使用该工具。若无法确定可运行的测试工具，应报告已检查的路径以及缺失的框架或命令，而不是凭空指定。

参考资料

测试框架

• Vitest：当仓库配置或现有测试选用 Vitest 时使用
• React Testing Library：用于组件测试
• MSW (Mock Service Worker)：用于 API 模拟
• 测试导入：import { describe, it, expect, beforeEach, vi } from 'vitest'
• 组件测试导入：import { render, screen } from '@testing-library/react'
• 用户交互：import userEvent from '@testing-library/user-event'
• Mock 创建：使用 vi.mock()

基本测试策略

质量要求

• 回归防护：在关键路径和高复用组件上，断言指定的验收结果、公开分支或失败状态
• 独立性：每个测试都能独立运行，不依赖其他测试
• 可复现性：控制时间、随机性、环境变量、网络响应和浏览器状态，使相同的输入产生相同的可观测结果
• 可读性：每个测试只描述一个用户可见的行为，分离 setup/action/assertion，并将 fixture 限制为该行为实际用到的值

应将测试严谨性集中于何处

对于跨功能复用的共享组件、自定义 hook 和工具函数，应覆盖其公开分支、错误状态和边界契约，因为它们的回归影响范围更大。当行为依赖于多个已渲染单元时，通过集成测试/E2E 测试来验证页面级组合。

测试类型与范围

1. 单元测试（React Testing Library）
   • 验证单个组件或函数的行为
   • Mock 所有外部依赖
   • 数量最多，采用细粒度实现
   • 关注用户可观测的行为