前端架构手记
质量

前端测试策略：单元/组件/E2E 的平衡

用「测试金字塔」指导前端测试投入，讲清单元、组件、端到端测试的分工与取舍。

一舟 1 分钟阅读

「要不要写测试、写多少」是前端团队的经典纠结。测试金字塔给了我们一个清晰的指导框架。

测试金字塔

金字塔主张：底层多、顶层少。

  • 单元测试（最多）：测纯函数、工具函数，快速稳定；
  • 组件测试（居中）：测组件的渲染与交互；
  • 端到端测试（最少）：测完整用户流程，昂贵但保真。

各层的分工

单元测试：测逻辑

对工具函数、业务规则、状态逻辑，用 Vitest/Jest 写单元测试。它们最快、最稳定，是性价比最高的测试。

test('sum', () => {
  expect(sum(1, 2)).toBe(3);
});

组件测试：测交互

用 Testing Library 测组件「用户视角」的行为——渲染结果与交互，而非内部实现。

render(<Counter />);
fireEvent.click(screen.getByText('+1'));
expect(screen.getByText('1')).toBeInTheDocument();

E2E：测流程

用 Playwright/Cypress 测关键用户旅程，如「登录 → 下单 → 支付」，保证整体不崩。

平衡的艺术

  • 别追求 100% 覆盖率，测高价值、易出错的逻辑；
  • 组件测试聚焦用户可感知的行为，避免过度依赖实现细节；
  • E2E 只覆盖核心流程，避免维护大量脆弱的 UI 测试。

落地建议

  1. 从单元测试起步，成本最低；
  2. 关键组件补组件测试；
  3. 核心流程加少量 E2E；
  4. 把测试接入 CI，保证持续执行。

结语

测试的价值在于降低修改代码的恐惧。按金字塔合理分配投入，测试才是资产，而非负担。