Jest 快照测试(Snapshot Testing)完全指南

Jest 快照测试(Snapshot Testing)完全指南

jest Delightful JavaScript Testing. 项目地址: https://gitcode.com/gh_mirrors/je/jest

什么是快照测试？

快照测试是 Jest 提供的一种独特的测试方法，主要用于确保 UI 界面或数据结构不会意外改变。它的核心思想是通过"拍照"的方式记录组件或数据的当前状态，并在后续测试中进行比对。

快照测试工作原理

1. 首次运行：当第一次运行快照测试时，Jest 会创建一个快照文件（.snap 文件），其中包含被测组件的序列化输出。

2. 后续运行：之后每次测试运行时，Jest 会将当前输出与存储的快照进行比对。

3. 结果判断：

   • 如果匹配：测试通过
   • 如果不匹配：
     • 可能是意外的变更（需要修复）
     • 也可能是预期的变更（需要更新快照）

基本使用示例

以下是一个 React 组件快照测试的典型示例：

import renderer from 'react-test-renderer';
import Link from '../Link';

it('链接组件渲染正确', () => {
  const tree = renderer
    .create(<Link page="http://www.example.com">示例链接</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

首次运行后会生成类似这样的快照文件：

exports[`链接组件渲染正确 1`] = `
<a
  className="normal"
  href="http://www.example.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  示例链接
</a>
`;

快照更新策略

当组件发生有意变更时，需要更新快照：

jest --updateSnapshot
# 或简写
jest -u

交互式更新模式

在 watch 模式下，Jest 提供了交互式更新选项：

1. 按 u 键更新单个失败的快照
2. 按 i 进入交互式更新模式，逐个检查失败的快照

高级特性

内联快照(Inline Snapshots)

内联快照将快照内容直接写入测试文件中：

it('渲染内联快照', () => {
  const tree = renderer
    .create(<Link page="https://example.com">示例</Link>)
    .toJSON();
  expect(tree).toMatchInlineSnapshot();
});

运行后会自动填充快照内容：

expect(tree).toMatchInlineSnapshot(`
  <a
    className="normal"
    href="https://example.com"
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
  >
    示例
  </a>
`);

属性匹配器(Property Matchers)

处理包含动态数据（如日期、随机ID）的对象：

it('处理动态属性', () => {
  const user = {
    createdAt: new Date(),
    id: Math.floor(Math.random() * 20),
    name: '测试用户',
  };

  expect(user).toMatchSnapshot({
    createdAt: expect.any(Date),
    id: expect.any(Number),
  });
});

生成的快照会使用匹配器代替实际值：

{
  "createdAt": Any<Date>,
  "id": Any<Number>,
  "name": "测试用户",
}

最佳实践

1. 将快照视为代码：提交到版本控制并参与代码审查
2. 保持测试确定性：避免快照中包含非确定性数据
3. 使用描述性名称：清晰表达快照预期内容
4. 保持快照精简：只测试必要部分，避免过大快照
5. 结合其他测试方法：快照测试不应完全替代单元测试

常见问题解答

快照测试与视觉回归测试有何不同？

快照测试序列化数据结构进行文本比对，而视觉回归测试是像素级的图像比对。快照测试更轻量且易于维护。

快照测试能替代单元测试吗？

不能。快照测试是补充而非替代，它擅长捕捉意外变更，但不擅长表达意图。

CI环境中会自动更新快照吗？

不会。CI环境中快照测试会比较现有快照，不会自动更新，需要显式使用更新命令。

如何处理快照冲突？

可以手动解决冲突，或者重新生成快照（确保变更是有意的）。

适用场景

快照测试特别适合：

• React/Vue 组件输出
• 配置对象
• API响应数据结构
• 日志信息
• 错误消息格式

通过合理使用快照测试，可以显著提高前端项目的测试覆盖率和维护效率，同时减少编写断言的工作量。

jest Delightful JavaScript Testing. 项目地址: https://gitcode.com/gh_mirrors/je/jest