标准答案

  1. 底层单元测试覆盖纯函数、工具函数、状态计算、边界条件和复杂分支,要求快且稳定。
  2. 中层组件测试或集成测试覆盖组件渲染、用户交互、状态变化、表单校验和局部 API 协作。
  3. 顶层 E2E 覆盖登录、下单、支付、核心配置保存等端到端关键路径。
  4. 越靠上越接近真实用户,但成本、耗时和不稳定性也越高,所以数量要更克制。
  5. 测试金字塔要配合 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 过度,测试完全绕开真实接口契约和浏览器行为。

作者信息