标准答案
- 底层单元测试覆盖纯函数、工具函数、状态计算、边界条件和复杂分支,要求快且稳定。
- 中层组件测试或集成测试覆盖组件渲染、用户交互、状态变化、表单校验和局部 API 协作。
- 顶层 E2E 覆盖登录、下单、支付、核心配置保存等端到端关键路径。
- 越靠上越接近真实用户,但成本、耗时和不稳定性也越高,所以数量要更克制。
- 测试金字塔要配合 Mock、测试数据、CI 分层执行和失败诊断,不是单纯追求覆盖率数字。
题目解析
前端测试经常失败在层级错配。把所有逻辑都放到 E2E 里测,会慢且脆;只写单元测试,又可能漏掉组件交互、路由、接口和浏览器行为。
金字塔的核心是成本分配。纯逻辑用单元测试快速覆盖,组件行为用组件测试确认用户能怎么操作,关键业务路径再用少量 E2E 保证真实流程没有断。
覆盖率只能说明代码被执行过,不能说明业务风险被覆盖。更好的设计是围绕高风险逻辑、历史故障、核心收入路径和复杂交互决定测试层级。
代码示例
不同层级的测试应该回答不同问题。
Text
unit:
price calculation, validators, reducers
component:
form interaction, error state, loading state
E2E:
login -> create order -> pay -> success page常见误区
- 把所有测试都写成 E2E,导致 CI 慢、不稳定、定位困难。
- 只追求覆盖率,不覆盖真实用户路径和历史高风险点。
- Mock 过度,测试完全绕开真实接口契约和浏览器行为。