单元测试

┌──────────────┐   ┌──────────────┐   ┌──────────────┐   ┌──────────────┐
│  1950 年代   │ → │  1990 年代   │ → │  2010 年代   │ → │  2020 年+    │
│  人工验证    │ │  xUnit 体系  │ │  Jest 时代   │ │  AI 辅助测试 │
│  手动断言    │ │  自动化框架  │ │  零配置时代  │ │  智能生成    │
└──────────────┘   └──────────────┘   └──────────────┘   └──────────────┘

问题：改了一行代码，不知道会不会影响其他功能

手动回归所有功能 → 耗时 2 小时 → 改了 10 处后不敢再改 → 代码变成"碰不得"的技术债

解决：用自动化测试覆盖核心逻辑，每次修改后 30 秒内知道有没有破坏已有功能

npm test → 全部通过 → 放心提交 → CI 自动验证 → 安全部署

┌───────────────────────────────────────┐
│           测试运行器（Runner）         │  ← 发现并执行测试文件
└─────────────────┬─────────────────────┘
                  │ 执行 describe/it 块
                  ▼
┌───────────────────────────────────────┐
│           断言库（Assert）             │  ← expect(a).toBe(b) 比较实际与预期
└─────────────────┬─────────────────────┘
                  │ 通过/失败
                  ▼
┌───────────────────────────────────────┐
│           报告器（Reporter）           │  ← 输出测试结果和覆盖率
└───────────────────────────────────────┘

// Jest/Vitest 的断言本质上就是 try-catch + 比较
// 简化的断言实现原理
class Expect {
  constructor(actual) {
    this.actual = actual;
  }
  toBe(expected) {
    if (!Object.is(this.actual, expected)) {
      throw new Error(`Expected ${expected}, but got ${this.actual}`);
    }
  }
  toEqual(expected) {
    if (JSON.stringify(this.actual) !== JSON.stringify(expected)) {
      throw new Error(`Deep equality check failed`);
    }
  }
}
function expect(actual) {
  return new Expect(actual);
}

// Jest 的 Mock 本质上是对函数的代理包装
function createMockFn() {
  const mock = function (...args) {
    mock.calls.push(args); // 记录调用次数和参数
    mock.results.push({ type: "return", value: undefined });
    if (mock._implementation) {
      return mock._implementation(...args);
    }
  };
  mock.calls = [];
  mock.results = [];
  mock._implementation = null;
  mock.mockImplementation = (fn) => {
    mock._implementation = fn;
  };
  mock.mockReturnValue = (val) => {
    mock._implementation = () => val;
  };
  return mock;
}

// 快照测试的简化原理
function toMatchSnapshot(actual) {
  const serialized = serialize(actual); // 序列化为字符串
  const stored = loadSnapshotFile(); // 从 .snap 文件读取上次的结果
  if (!stored) {
    saveSnapshot(serialized); // 首次运行：保存基准
    return;
  }
  if (serialized !== stored) {
    throw new Error(
      `Snapshot mismatch:\nExpected: ${stored}\nReceived: ${serialized}`,
    );
  }
}

// ❌ 测试实现细节：关注组件内部状态和方法
test("计数器", () => {
  const wrapper = mount(<Counter />);
  expect(wrapper.state().count).toBe(0); // 耦合内部状态
  wrapper.instance().increment(); // 耦合内部方法
  expect(wrapper.state().count).toBe(1);
});
// 如果重构组件从 class 改为 hooks，测试全部报废

// ✅ 测试行为：关注用户能看到什么、能做什么
test("计数器", () => {
  render(<Counter />);
  expect(screen.getByText("当前计数: 0")).toBeInTheDocument();
  fireEvent.click(screen.getByRole("button", { name: "增加" }));
  expect(screen.getByText("当前计数: 1")).toBeInTheDocument();
});
// 无论内部用 class、hooks 还是 Zustand，只要行为不变测试就通过

// 优先使用 getByRole——它同时验证了元素类型和可访问性
screen.getByRole("button", { name: "提交" }); // 是按钮 + 文字是"提交"
screen.getByRole("textbox", { name: "用户名" }); // 是输入框 + label 是"用户名"

// 最后才用 getByTestId——它不验证任何语义
screen.getByTestId("submit-button"); // 只检查 data-testid，不验证是否是按钮

// ❌ 错误做法：Mock 了不该 Mock 的东西
// Mock 了工具函数，导致测试无法发现工具函数本身的 bug
jest.mock("./utils", () => ({
  calculatePrice: jest.fn(() => 100), // 硬编码返回值
}));

// ✅ 正确做法：只 Mock 外部依赖，保留内部逻辑
// 内部工具函数走真实逻辑，只 Mock 外部 API 调用
jest.mock("./api", () => ({
  fetchUser: jest.fn(() => Promise.resolve({ name: "张三" })),
}));

import { calculatePrice } from "./utils"; // 真实逻辑
import { fetchUser } from "./api"; // Mock 的外部依赖

test("计算价格时考虑用户折扣", async () => {
  const user = await fetchUser();
  const price = calculatePrice(100, user.discount);
  expect(price).toBe(90); // 同时验证了工具函数和业务逻辑
});

// Mock axios——替换整个 HTTP 客户端
jest.mock("axios");
import axios from "axios";

test("获取用户列表", async () => {
  axios.get.mockResolvedValue({
    data: [{ id: 1, name: "张三" }],
  });
  const users = await fetchUsers();
  expect(users).toHaveLength(1);
  expect(axios.get).toHaveBeenCalledWith("/api/users");
});

// 控制时间流逝——让 setTimeout/setInterval 立即执行
jest.useFakeTimers();

test("防抖函数", () => {
  const fn = jest.fn();
  const debounced = debounce(fn, 300);

  debounced();
  debounced();
  debounced();

  jest.advanceTimersByTime(300); // 快进 300ms
  expect(fn).toHaveBeenCalledTimes(1); // 只调用了一次
});

import { vi } from "vitest";

// Vitest：vi.hoisted 的内容会先于 import 执行
const mockUser = vi.hoisted(() => ({ name: "张三" }));

vi.mock("./api", () => ({
  fetchUser: vi.fn(() => Promise.resolve(mockUser)),
}));

// Jest 的等价写法：变量名必须以 mock 开头，否则提升后会报初始化错误

┌──────────────────────────────────────────────┐
│                覆盖率层级                     │
│                                              │
│  语句覆盖 (Statement)    ← 最低标准          │
│    └─ 分支覆盖 (Branch)  ← 推荐标准          │
│      └─ 路径覆盖 (Path)  ← 理想但难达到      │
└──────────────────────────────────────────────┘

function classify(score) {
  if (score >= 60) {
    // 分支 1
    if (score >= 90) return "A"; // 分支 2
    return "B";
  } else {
    // 分支 3
    return "C";
  }
}

// 语句覆盖：每个语句至少执行一次（2 个用例即可 100%）
classify(95); // 覆盖 分支1(>=60) + 分支2(>=90) → 'A'
classify(50); // 覆盖 分支3(< 60) → 'C'
// 语句覆盖率 100%，但 score=70 的路径（>=60 但 <90）没测到！

// 分支覆盖：每个分支至少执行一次（3 个用例）
classify(95); // >=60 且 >=90
classify(70); // >=60 且 <90
classify(50); // <60
// 分支覆盖率 100%，覆盖了所有 if-else 分支

// ❌ 为了刷覆盖率而写的测试——测了等于没测
test("getUserName 返回用户名", () => {
  const result = getUserName({ name: "张三" });
  expect(result).toBeDefined(); // 只检查不是 undefined，不检查值对不对
});

// ✅ 有意义的测试——验证具体行为
test("getUserName 返回用户名", () => {
  expect(getUserName({ name: "张三" })).toBe("张三");
  expect(getUserName({})).toBe("匿名用户");
  expect(getUserName(null)).toBe("未知");
});