测试体系：用最低成本守住最高风险 · 框架工程

WHY IT MATTERS

先用一句白话理解

测试像城市安检：单元测试检查零件，组件测试检查房间，端到端测试只走最重要的整条逃生路线。

LEARNING OUTCOMES

学完你能做到什么

按风险设计单元、组件、集成与 E2E 测试比例

用 Vitest 4.1 编写断言、Mock、Fixture 与覆盖率检查

遵循 Testing Library 原则测试用户可观察行为

用 Playwright 完成跨浏览器流程、Trace 与失败诊断

在 CI 中治理不稳定测试、并行任务和质量门禁

CONCEPT DEEP DIVE

把每个核心概念讲透

不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。

01CORE CONCEPT

风险驱动测试策略

先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“为前面完成的商业内容站建立从业务规则到跨浏览器关键路径的测试体系。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。

02CORE CONCEPT

Vitest 4.1

03CORE CONCEPT

Testing Library

04CORE CONCEPT

Mock 与 Fixture

05CORE CONCEPT

组件与浏览器模式

06CORE CONCEPT

Playwright Locator

07CORE CONCEPT

自动等待与 Trace

08CORE CONCEPT

无障碍与视觉回归

09CORE CONCEPT

CI 与 Flaky Test 治理

CONCEPT MAP

这一章的学习步骤

1风险驱动测试策略

2Vitest 4.1

3Testing Library

4Mock 与 Fixture

5组件与浏览器模式

6Playwright Locator

7自动等待与 Trace

8无障碍与视觉回归

9CI 与 Flaky Test 治理

STEP 01

为价格规则和权限规则补齐单元测试

STEP 02

从用户视角测试表单验证与错误恢复

STEP 03

完成登录、购买或发布的关键 E2E 流程

STEP 04

让失败用例在 CI 中留下可复现的 Trace 和报告

HANDS-ON PROJECT

动手任务

PROJECT BRIEF

为前面完成的商业内容站建立从业务规则到跨浏览器关键路径的测试体系。

交付清单

✓基于风险的测试计划
✓Vitest 与 Playwright 测试集
✓CI 报告、Trace 和不稳定测试处理规则

MINIMUM RUNNABLE CODE

Vitest 4.1 最小业务规则测试

import { describe, expect, it } from "vitest";

function finalPrice(price: number, discount: number) {
  return Math.max(0, price - discount);
}

describe("finalPrice", () => {
  it("价格不会小于零", () => {
    expect(finalPrice(80, 100)).toBe(0);
  });
});

先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。

DELIBERATE PRACTICE

三级练习：从复现到生产

每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。

LEVEL 1 · 基础复现

让核心机制第一次跑通

为价格规则和权限规则补齐单元测试
从用户视角测试表单验证与错误恢复
完成登录、购买或发布的关键 E2E 流程
让失败用例在 CI 中留下可复现的 Trace 和报告

LEVEL 2 · 独立改造

改变约束，验证你真的理解

不看教程，独立完成：按风险设计单元、组件、集成与 E2E 测试比例
不看教程，独立完成：用 Vitest 4.1 编写断言、Mock、Fixture 与覆盖率检查
不看教程，独立完成：遵循 Testing Library 原则测试用户可观察行为
不看教程，独立完成：用 Playwright 完成跨浏览器流程、Trace 与失败诊断
不看教程，独立完成：在 CI 中治理不稳定测试、并行任务和质量门禁

LEVEL 3 · 生产挑战

把实验变成能交付的工程

基于风险的测试计划
Vitest 与 Playwright 测试集
CI 报告、Trace 和不稳定测试处理规则
检查缓存、Hydration、错误恢复、可观测性和部署约束，并把检查结果写进项目复盘。

COMMON PITFALLS

最容易踩的坑

断言组件内部实现细节，重构样式就大量失败

用固定等待时间掩盖异步竞态

为了覆盖率测试无价值的 getter，却漏掉核心业务路径

让所有 E2E 共用同一个账号和数据，产生相互污染

SELF CHECK

先回答，再展开参考答案

Q01这一课最核心的业务目标是什么？＋

不追求漂亮的覆盖率数字，而是从用户风险出发，用 Vitest 4.1、Testing Library 和 Playwright 构建快速、稳定、可调试的质量反馈链。

Q02如果只能保留三个验收结果，应该保留什么？＋

基于风险的测试计划；Vitest 与 Playwright 测试集；CI 报告、Trace 和不稳定测试处理规则

Q03学习过程中最需要主动避免什么？＋

断言组件内部实现细节，重构样式就大量失败；用固定等待时间掩盖异步竞态；为了覆盖率测试无价值的 getter，却漏掉核心业务路径；让所有 E2E 共用同一个账号和数据，产生相互污染

Q04怎样证明你不是“看懂了”，而是真的会做？＋

独立完成“为前面完成的商业内容站建立从业务规则到跨浏览器关键路径的测试体系。”，并用测试、数据或运行结果逐项验收交付清单。

PRODUCTION READINESS

本课完成检查表

全部能打勾，再进入下一课。

□目标明确：按风险设计单元、组件、集成与 E2E 测试比例
□核心机制已用最小实验验证：为价格规则和权限规则补齐单元测试
□风险已检查：断言组件内部实现细节，重构样式就大量失败
□风险已检查：用固定等待时间掩盖异步竞态
□风险已检查：为了覆盖率测试无价值的 getter，却漏掉核心业务路径
□风险已检查：让所有 E2E 共用同一个账号和数据，产生相互污染
□交付物可复现：基于风险的测试计划
□交付物可复现：Vitest 与 Playwright 测试集
□交付物可复现：CI 报告、Trace 和不稳定测试处理规则

PRIMARY SOURCES

继续深入的官方资料

Vitest 官方指南 Vitest 4.1 官方发布说明 Playwright 官方测试指南 Testing Library 官方原则

课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。