Jest项目中的快照测试(Snapshot Testing)详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00003/article/details/148325105

Jest项目中的快照测试(Snapshot Testing)详解

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

什么是快照测试

快照测试是前端开发中一种非常实用的测试方法，特别适合用于确保UI界面不会发生意外变更。它的核心原理是通过对比组件在不同时期的输出结果来检测变化。

快照测试的工作流程通常包含以下步骤：

渲染UI组件
生成当前状态的快照
与之前存储的参考快照文件进行对比

如果两者不匹配，测试就会失败，这意味着要么出现了意外的变更，要么需要更新参考快照以反映组件的合法变更。

在Jest中使用快照测试

Jest为React组件提供了专门的快照测试支持。相比渲染完整UI，Jest使用测试渲染器快速生成React组件树的序列化值。

基本用法示例

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

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

首次运行测试时，Jest会创建一个快照文件，其中包含组件渲染结果的序列化表示。这个文件应该与代码变更一起提交，并在代码审查过程中进行检查。

快照更新机制

当组件的预期输出发生合法变更时，需要更新快照。Jest提供了便捷的更新命令：

jest --updateSnapshot
# 或简写
jest -u

这个命令会重新生成所有失败的快照测试的快照文件。如果只想更新特定测试的快照，可以使用--testNamePattern标志来指定测试模式。

交互式快照模式

在watch模式下，Jest提供了交互式的快照更新方式：

进入交互模式后，Jest会逐个显示失败的快照
开发者可以逐项决定是否更新快照
完成后，Jest会提供摘要信息

高级快照测试技巧

内联快照

内联快照与外部快照文件功能相同，但快照值会自动写回测试代码中。使用.toMatchInlineSnapshot()方法即可：

it('渲染正确', () => {
  const tree = renderer
    .create(<Link page="https://example.com">Example Site</Link>)
    .toJSON();
  expect(tree).toMatchInlineSnapshot();
});

运行后，Jest会自动填充快照内容到测试代码中。

属性匹配器

对于包含动态生成值（如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),
  });
});

这样，快照中会记录匹配器类型而非具体值，使测试更加稳定。