8.2 测试类型详解

---

1. 核心概念：你的武器库

想象你在经营一家修车店。为了保证修好的车不出问题，你需要三样东西：

1. 静态扫描仪：TypeScript + ESLint

• 这是什么：不运行代码，光靠“看”来找茬。
• 比喻：就像文档纠错工具。你刚把“螺丝”写成“骡子”，它就标红线告诉你错了。
• 作用：防止低级笔误、拼写错误、类型错误（把数字当字符串用）。
• 什么时候用：每时每刻。它集成在 VS Code 里，你敲代码时它就在工作。

2. 精密实验台：Vitest

• 这是什么：单元测试工具。它是 Jest 的现代替代品，专为 Vite 和 Next.js 设计。
• 比喻：专门用来测试引擎零件的真空实验室。它看不见网页，只能跑逻辑。
• 作用：测试纯逻辑函数（加减乘除、数据转换）。
• 什么时候用：当你写了一个复杂的函数，心里没底的时候。

3. 仿生试车员：Playwright

• 这是什么：E2E 测试工具。微软出品，目前最强的浏览器自动化工具。
• 比喻：一个机器人，坐在电脑前，打开 Chrome，真的去点你的网站。
• 作用：测试用户界面、交互流程。
• 什么时候用：上线前，确保核心功能（注册、支付）能跑通。

---

2. 它们长什么样？(实操视角)

别光听概念，我们看看代码文件长什么样。

场景：我们要测试一个“加法”功能

源代码 (math.ts)

export function add(a: number, b: number) {
  return a + b;
}

1. TypeScript 的工作 (在编辑器里)

如果你写 add(1, "2")，VS Code 会直接爆红：

Argument of type 'string' is not assignable to parameter of type 'number'. (老兄，我要的是数字，你给我个字符串干嘛？)

2. Vitest 的工作 (math.test.ts)

这是一个专门的测试文件。

import { expect, test } from 'vitest';
import { add } from './math';

test('1 加 1 应该等于 2', () => {
  // expect(实际结果).toBe(预期结果)
  expect(add(1, 1)).toBe(2);
});

运行命令：npm run test 终端输出：✅ 1 passed

3. Playwright 的工作 (login.spec.ts)

测试登录页面。

import { test, expect } from '@playwright/test';

test('用户应该能登录', async ({ page }) => {
  // 1. 机器人打开网页
  await page.goto('https://localhost:3000/login');
  
  // 2. 机器人输入密码
  await page.fill('input[name="password"]', '123456');
  
  // 3. 机器人点击按钮
  await page.click('button[type="submit"]');
  
  // 4. 机器人检查是不是看到了"欢迎"
  await expect(page.getByText('欢迎回来')).toBeVisible();
});

运行命令：npx playwright test 你会看到一个浏览器瞬间闪过，然后终端输出绿色的 Passed。

---

3. 防御体系流程图

把这三者结合起来，就构成了你的代码防御网：

graph TD
    Code[你写了一行代码] -->|"Level 1: 拼写检查"| TS[TypeScript]
    Code -->|"Level 2: 逻辑验证"| Unit[Vitest]
    Code -->|"Level 3: 模拟用户"| E2E[Playwright]
    
    TS -->|写错了| Fix1[编辑器标红 (立刻修)]
    Unit -->|算错了| Fix2[测试报错 (重写逻辑)]
    E2E -->|点不动| Fix3[流程不通 (修界面)]
    
    Fix1 --> Deploy[上线]
    Fix2 --> Deploy
    Fix3 --> Deploy
    
    style TS fill:#fff9c4,stroke:#fbc02d
    style Unit fill:#e1bee7,stroke:#8e24aa
    style E2E fill:#c8e6c9,stroke:#2e7d32

---

4. 真实案例

---

5. 本章小结

1. TypeScript：你的拼写检查器，时刻开着。
2. Vitest：你的实验台，测逻辑、测算法。
3. Playwright：你的试车员，测网页、测交互。