什么是快照测试？

Question

什么是快照测试？

Accepted Answer

**快照测试（Snapshot testing）** 会捕获某些输出的“快照”（通常是 UI 组件的渲染结果或某个数据结构），并将后续运行的结果与之进行比较——当输出发生变化时发出提示。它对于检测意外更改很有用，但也有一些需要理解的局限性。

## 快照测试的工作原理

```text
1. First run → the test RECORDS the output (e.g. a rendered component) as a SNAPSHOT file
2. Later runs → COMPARE the current output to the saved snapshot:
   → MATCHES → pass; DIFFERS → fail (the output changed)
3. If the change is INTENTIONAL → UPDATE the snapshot (review the diff, then accept)
```

```js
// Jest snapshot test (e.g. a React component)
test('renders correctly', () => {
  const tree = render(<Button label="Click" />).toJSON();
  expect(tree).toMatchSnapshot();    // compares to the stored snapshot
});
```

## 用途与优点

```text
✓ Detect UNINTENDED CHANGES — flags when output changes unexpectedly (UI, serialized data)
✓ FAST to write — no manual assertions for complex output; auto-captures the expected result
✓ Good for UI components (catch unexpected rendering changes), config, large data structures
```

## 局限性（谨慎使用）

```text
⚠️ Snapshots don't verify CORRECTNESS — they capture whatever output exists (even if WRONG);
   they only detect CHANGE, not that the output is RIGHT
⚠️ BLINDLY UPDATING snapshots (jest -u without reviewing) → defeats the purpose (accepting
   broken output) — a common bad habit
⚠️ Large/brittle snapshots → change often, get rubber-stamped, low value
→ Use for change detection; keep snapshots small/focused; REVIEW snapshot diffs;
  don't rely on them alone (combine with real assertions for behavior).
```

## 为什么这很重要

理解快照测试很有价值，因为它是一种**被广泛使用的技术**（尤其是用于 UI），运用得当时很有用，但被误用时会带来问题，因此理解它的价值和局限性都是重要的实践知识。

快照测试——捕获输出（通常是渲染后的 UI 组件或数据结构）并将后续运行的结果与已存储的快照进行比较——**对于检测意外更改很有用**：当输出发生意外变化时它会发出提示（捕获意外的 UI 渲染变化或数据结构变化），**编写起来很快**（自动捕获预期输出，无需手动断言复杂输出的每一个细节），并且适用于 UI 组件、配置以及大型数据结构。

理解这些优点可以解释它为何流行，尤其是在 UI 测试中。

然而，理解其**局限性至关重要**，才能用好它：快照**不验证正确性**——它们捕获的是当前存在的任何输出（即使是错误的），只检测*变化*而非*是否正确*——因此快照可能会把有缺陷的输出固化下来。

**最大的陷阱是盲目更新快照**（不检查 diff 就运行更新命令），这会通过接受可能有缺陷的输出而违背了其初衷——这是一个常见的坏习惯。

庞大、脆弱、频繁变化的快照往往会被随意盖章通过，提供的价值很低。

理解正确的用法——用于变更检测、保持快照小而聚焦、仔细**检查快照 diff**，并且不单独依赖它（结合真正的行为断言）——体现了成熟的判断力，能避免常见的误用。

由于快照测试被广泛使用（尤其是用于 UI），对变更检测很有用但又容易被误用（固化错误输出、盲目更新），并且由于理解其价值及其重要局限性才能用好它，因此理解快照测试是有价值、与实践高度相关的知识——一种需要正确理解的常见技术，其中体会它的局限性（变更检测，而非正确性）和正确用法（检查 diff，而非盲目更新）与技术本身同样重要，体现了健全的测试判断力。