建立单元测试与端到端测试

建立单元测试与端到端测试

这篇笔记还在编辑中,内容可能会继续补充、调整或重写。

本阶段目标

用不同测试层级覆盖不同风险:单元测试快速验证业务规则,组件测试验证用户可见交互,端到端测试验证一条部署后的关键流程。

选择第一批用例

frontend-lab 增加任务状态转换规则,并编写:

  1. 单元测试:完成任务、重复提交、非法状态等纯逻辑边界。
  2. 组件测试:用户输入标题、看到校验错误、提交后列表更新。
  3. 端到端测试:打开列表、创建任务、刷新页面并看到结果。

测试应查询角色、可访问名称和用户可见文本,避免依赖组件实例、私有方法或容易变化的 CSS 结构。

API 与数据

使用契约驱动的 Mock 模拟成功、慢响应、服务端校验失败和 500 错误。每个用例拥有独立数据,不依赖执行顺序;涉及时间、时区和随机数时显式固定环境。

推荐脚本:

{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest",
    "test:e2e": "playwright test"
  }
}

失败证据

CI 中的浏览器测试失败时,应保存截图、Trace、视频或网络日志。重试只能用于确认偶发性,不能成为长期掩盖 Flaky Test 的手段。

故障演练

  1. 把按钮文本改掉,观察基于角色的查询能否提供可理解错误。
  2. 在端到端测试中加入固定等待,再改成等待可观察状态,比较稳定性和耗时。
  3. 让 Mock 响应偏离真实契约,验证契约校验是否能发现漂移。

验收标准

  • 纯业务规则测试不需要启动浏览器
  • 组件测试覆盖成功、校验失败和请求失败
  • 一条关键流程在真实浏览器中通过
  • 测试可并行、可重复,不依赖本地已有数据
  • 端到端失败会产出足够定位问题的制品

下一篇:配置 CI/CD 与预览环境