[!info] related notes

• 所属 MOC: Testing MOC, 前端工程化 MOC
• 相关主题: Monorepo 测试架构, TDD 中测什么与测试金字塔
• 相关工具: Playwright 🚀, msw-mock-service-worker

前端测试

目标

前端测试的重点不是把所有问题都推给浏览器 E2E，而是把验证拆成不同粒度：

• 组件测试
• 页面/容器交互测试
• 少量关键旅程 E2E

更稳的目标是：大量快速小测试，少量高价值系统测试。

步骤

1. 组件测试先覆盖稳定行为

优先测这些：

• 表单校验
• 错误提示
• 状态展示
• 交互分支
• 纯展示组件的输入输出行为

这里更适合关注用户可见结果，而不是组件内部 state 如何组织。

2. 页面级测试验证容器和状态协作

这一层更适合测：

• 页面初始化
• 数据加载后的不同 UI 分支
• 请求失败与重试
• 状态管理与视图联动

如果后端还没稳定，可以先基于共享 contracts 和 mock 数据推进这层测试。

3. E2E 只留关键旅程

典型例子：

• 登录
• 提交订单
• 发起退款
• 核心搜索或查询路径

不要把所有边角逻辑都塞给 E2E，否则很容易得到慢而脆的测试集。

验证

前端测试里最重要的验证原则是：尽量测用户看得见、点得到、感知得到的行为。

更稳的定位方式通常是：

• role
• text
• label
• 可访问名称

而不是依赖脆弱的 DOM 结构和 CSS class。

常见问题

只会 mock，不会分层

如果所有前端测试都只剩“写死假数据看页面能不能渲染”，那还没形成完整测试体系。

把太多验证推给 E2E

这会让反馈越来越慢，也让 UI 测试越来越难维护。

过度贴实现

如果测试总盯着内部状态、组件私有细节和临时 DOM 结构，重构成本会非常高。

最短记忆方式

前端测试优先测用户可见行为；小测试打底，关键旅程少量 E2E 兜住。