什么是 Jest 快照测试？如何使用快照测试来验证组件输出？ - 面试题

Jest 的快照测试（Snapshot Testing）是一种强大的测试工具，用于确保 UI 组件或数据结构不会意外改变：

快照测试原理：

首次运行时，Jest 会捕获组件的渲染输出并保存为快照文件
后续运行时，将当前输出与保存的快照进行比较
如果输出发生变化，测试会失败并提示差异

基本用法：

javascript
import renderer from 'react-test-renderer';
import Button from './Button';

test('Button snapshot', () => {
  const tree = renderer
    .create(<Button>Click me</Button>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

内联快照：

javascript
test('inline snapshot', () => {
  const data = { name: 'John', age: 30 };
  expect(data).toMatchInlineSnapshot(`
    Object {
      "age": 30,
      "name": "John",
    }
  `);
});

快照更新：

交互式更新：jest -u 或 jest --updateSnapshot
CI/CD 中：使用 --ci 标志防止意外更新

最佳实践：

快照应该简洁且有意义
避免在快照中包含动态数据（如时间戳、ID）
定期审查和更新过时的快照
对于大型组件，考虑使用 toMatchSnapshot({mode: 'deep'})
使用自定义序列化器处理特殊对象

适用场景：

React/Vue 组件渲染测试
API 响应数据结构验证
配置文件结构检查