一个典型的快照测试用例将呈现一个UI组件，拍摄一个快照，然后将其与存储在测试中的参考快照文件进行比较。如果两个快照不匹配，则测试将失败：更改是意外的，或者参考快照需要更新为UI组件的新版本。

用Jest进行快照测试

测试React组件时可以采用类似的方法。您可以使用测试渲染器快速为React树生成可序列化的值，而不是渲染需要构建整个应用程序的图形UI。考虑以下针对链接组件的示例测试：

import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';it('renders correctly', () => {const tree = renderer.create(<Link page="http://www.facebook.com">Facebook</Link>).toJSON();expect(tree).toMatchSnapshot();
});

第一次运行此测试时，Jest创建一个快照文件，如下所示：

exports[`renders correctly 1`] = `
<aclassName="normal"href="http://www.facebook.com"onMouseEnter={[Function]}onMouseLeave={[Function]}
>Facebook
</a>
`;

快照工件应与代码更改一起提交，并在代码检查过程中进行检查。Jest使用漂亮格式在代码检查期间使快照易于阅读。在随后的测试运行中，Jest会将渲染的输出与先前的快照进行比较。如果它们匹配，则测试将通过。如果它们不匹配，则测试运行器在您的代码中发现了一个错误（在本例中为<Link>组件），应予以修复，或者实现已更改，并且快照需要更新。

注意：快照直接作用于您呈现的数据–在我们的示例中，快照是<Link />带有页面属性传递给它的组件。这意味着，即使任何其他文件App.js在<Link />组件中缺少props（Say，），它也将通过测试，因为该测试不知道该<Link />组件的用法，并且范围仅限于Link.react.js。同样，在其他快照测试中使用不同的道具渲染同一组件不会影响第一个组件，因为这些测试彼此之间并不了解。

更新快照

（1140267353）群内可领取最新软件测试大厂面试资料和Python自动化、接口、框架搭建学习资料！

引入错误后，可以很容易地发现快照测试何时失败。发生这种情况时，请继续解决此问题，并确保快照测试再次通过。现在，让我们讨论一下由于有意的实现更改而使快照测试失败的情况。

如果我们有意更改示例中Link组件指向的地址，则会出现这种情况。

// Updated test case with a Link to a different address
it('renders correctly', () => {const tree = renderer.create(<Link page="http://www.instagram.com">Instagram</Link>).toJSON();expect(tree).toMatchSnapshot();
});

在这种情况下，Jest将输出以下输出：

由于我们刚刚将组件更新为指向其他地址，因此可以合理地预期此组件快照中的更改。我们的快照测试用例失败了，因为更新后的组件的快照不再与该测试用例的快照工件匹配。

（1140267353）群内可领取最新软件测试大厂面试资料和Python自动化、接口、框架搭建学习资料！

要解决此问题，我们将需要更新快照工件。您可以使用带有指示其重新生成快照的标志的Jest运行：

jest --updateSnapshot

继续并通过运行上述命令接受更改。-u如果愿意，您也可以使用等效的单字符标志来重新生成快照。这将为所有失败的快照测试重新生成快照工件。如果由于意外错误而导致快照测试失败，我们将需要在重新生成快照之前修复该错误，以避免记录错误行为的快照。

如果您想限制重新生成哪些快照测试用例，则可以传递一个附加--testNamePattern标志来仅针对那些与模式匹配的测试重新记录快照。

您可以通过克隆快照示例，修改Link组件并运行Jest 来试用此功能。

互动快照模式

也可以在监视模式下以交互方式更新失败的快照：

进入“交互式快照模式”后，Jest将一次一步地引导您完成失败的快照，从而使您有机会查看失败的输出。

在这里，您可以选择更新快照或跳至下一个快照：

完成后，Jest将为您提供摘要，然后返回到观看模式：

内联快照

内联快照的行为与外部快照（.snap文件）相同，不同之处在于快照值会自动写回到源代码中。这意味着您可以享受自动生成的快照的好处，而不必切换到外部文件来确保写入正确的值。

内联快照由Prettier提供支持。要使用嵌入式快照，您必须已prettier在项目中安装了快照。写入测试文件时，将尊重您的Prettier配置。

如果您prettier安装在Jest找不到的位置，则可以使用"prettierPath"配置属性告诉Jest如何找到它。

示例：（1140267353）群内可领取最新软件测试大厂面试资料和Python自动化、接口、框架搭建学习资料！

首先，编写一个测试，.toMatchInlineSnapshot()不带任何参数调用：

it('renders correctly', () => {const tree = renderer.create(<Link page="https://prettier.io">Prettier</Link>).toJSON();expect(tree).toMatchInlineSnapshot();
});

下次运行Jest时，tree将对其进行评估，并将快照作为参数写入toMatchInlineSnapshot：

it('renders correctly', () => {const tree = renderer.create(<Link page="https://prettier.io">Prettier</Link>).toJSON();expect(tree).toMatchInlineSnapshot(`
<aclassName="normal"href="https://prettier.io"onMouseEnter={[Function]}onMouseLeave={[Function]}
>Prettier
</a>
`);
});

这里的所有都是它的！您甚至可以使用--updateSnapshot或使用u键入--watch模式来更新快照。

物业匹配者

通常，您要快照的对象中都有一些生成的字段（例如ID和Date）。如果尝试对这些对象进行快照，则它们将在每次运行时强制快照失败：

it('will fail every time', () => {const user = {createdAt: new Date(),id: Math.floor(Math.random() * 20),name: 'LeBron James',};expect(user).toMatchSnapshot();
});// Snapshot
exports[`will fail every time 1`] = `
Object {"createdAt": 2018-05-19T23:36:09.816Z,"id": 3,"name": "LeBron James",
}
`;

对于这些情况，Jest允许为任何属性提供非对称匹配器。在写入或测试快照之前，将检查以下匹配器，然后将其保存到快照文件中，而不是接收到的值：

it('will check the matchers and pass', () => {const user = {createdAt: new Date(),id: Math.floor(Math.random() * 20),name: 'LeBron James',};expect(user).toMatchSnapshot({createdAt: expect.any(Date),id: expect.any(Number),});
});// Snapshot
exports[`will check the matchers and pass 1`] = `
Object {"createdAt": Any<Date>,"id": Any<Number>,"name": "LeBron James",
}
`;

任何不匹配的给定值都将被精确检查并保存到快照中：

it('will check the values and pass', () => {const user = {createdAt: new Date(),name: 'Bond... James Bond',};expect(user).toMatchSnapshot({createdAt: expect.any(Date),name: 'Bond... James Bond',});
});// Snapshot
exports[`will check the values and pass 1`] = `
Object {"createdAt": Any<Date>,"name": 'Bond... James Bond',
}
`;

最佳实践

快照是一种出色的工具，可用于识别应用程序中意外的界面更改-无论该界面是API响应，UI，日志还是错误消息。与任何测试策略一样，您应该了解一些最佳实践，并遵循一些准则，以便有效地使用它们。

1.将快照视为代码

提交快照并将其作为常规代码检查过程的一部分进行检查。这意味着您像对待项目中任何其他类型的测试或代码一样对待快照。（1140267353）群内可领取最新软件测试大厂面试资料和Python自动化、接口、框架搭建学习资料！

确保快照集中，简短并使用强制执行这些样式约定的工具，以确保快照可读。

如前所述，Jest用于pretty-format使快照易于阅读，但是您可能会发现引入其他工具（如eslint-plugin-jest带有其no-large-snapshots选项或snapshot-diff组件快照比较功能）以促进提交简短而集中的断言很有用。

目的是使其易于查看拉取请求中的快照，并与在测试套件出现故障时避免重新生成快照的习惯相反，而不是检查其失败的根本原因。

2.测试应该是确定性的

您的测试应该是确定性的。在未更改的组件上多次运行相同的测试，每次应产生相同的结果。您有责任确保生成的快照不包括特定于平台的数据或其他不确定的数据。

例如，如果您有一个使用的Clock组件Date.now()，则每次运行测试用例时，从该组件生成的快照都会有所不同。在这种情况下，我们可以模拟Date.now（）方法以在每次运行测试时返回一致的值：

Date.now = jest.fn(() => 1482363367071);

现在，每次快照测试用例运行时，Date.now()都将1482363367071一致返回。无论何时运行测试，都将为此组件生成相同的快照。

3.使用描述性快照名称

始终努力为快照使用描述性测试和/或快照名称。最佳名称描述了预期的快照内容。这使得审阅者在审阅过程中更容易验证快照，并且任何人都可以在更新之前知道过时的快照是否是正确的行为。

例如，比较：

exports[`<UserName /> should handle some test case`] = `null`;exports[`<UserName /> should handle some other test case`] = `
<div>Alan Turing
</div>
`;

到：

exports[`<UserName /> should render null`] = `null`;exports[`<UserName /> should render Alan Turing`] = `
<div>Alan Turing
</div>
`;

由于后面的内容准确地描述了输出中的预期内容，因此更清楚地了解何时出现错误：

exports[`<UserName /> should render null`] = `
<div>Alan Turing
</div>
`;exports[`<UserName /> should render Alan Turing`] = `null`;

经常问的问题

快照是否自动写在持续集成（CI）系统上？

不可以，从Jest 20开始，如果Jest在CI系统中运行而未显式传递，则Jest中的快照不会自动写入--updateSnapshot。预计所有快照都是在CI上运行的代码的一部分，并且由于新快照会自动通过，因此它们不应通过在CI系统上运行的测试。建议始终提交所有快照并将其保留在版本控制中。

是否应该提交快照文件？

是的，所有快照文件都应与它们所涵盖的模块及其测试一起提交。应该将它们视为测试的一部分，类似于Jest中任何其他断言的值。实际上，快照表示任何给定时间点的源模块状态。这样，在修改源模块时，Jest可以告诉您与先前版本相比有哪些更改。它还可以在代码审阅期间提供许多其他上下文，以便审阅者可以更好地研究您的更改。

快照测试仅适用于React组件吗？

React和React Native组件是快照测试的好用例。但是，快照可以捕获任何可序列化的值，并且在目标测试输出是否正确时应使用快照。Jest存储库包含许多测试Jest本身的输出，Jest的断言库的输出以及来自Jest代码库各个部分的日志消息的示例。请参阅Jest存储库中的CLI输出快照示例。

快照测试和视觉回归测试有什么区别？

快照测试和视觉回归测试是测试UI的两种不同方法，它们具有不同的用途。视觉回归测试工具可以截取网页的屏幕截图，并逐像素比较生成的图像。使用Snapshot，测试值可以序列化，存储在文本文件中，并使用diff算法进行比较。有很多折衷考虑，我们在Jest博客中列出了构建快照测试的原因。

快照测试可以代替单元测试吗？

快照测试只是Jest附带的20多个断言之一。快照测试的目的不是要替换现有的单元测试，而是要提供附加的价值并使测试变得轻松。在某些情况下，快照测试可以潜在地消除对特定功能集（例如React组件）进行单元测试的需要，但是它们也可以一起工作。

关于生成文件的速度和大小，快照测试的性能如何？

Jest在重写时考虑了性能，并且快照测试也不例外。由于快照存储在文本文件中，因此这种测试方式既快速又可靠。Jest为每个调用toMatchSnapshot匹配器的测试文件生成一个新文件。快照的大小很小：作为参考，Jest代码库本身中的所有快照文件的大小都小于300 KB。

如何解决快照文件中的冲突？

快照文件必须始终代表其涵盖的模块的当前状态。因此，如果要合并两个分支并在快照文件中遇到冲突，则可以手动解决冲突，也可以通过运行Jest并检查结果来更新快照文件。

是否可以将测试驱动的开发原则应用于快照测试？

尽管可以手动写入快照文件，但这通常无法实现。快照有助于确定测试涵盖的模块的输出是否已更改，而不是首先提供指导以设计代码。

代码覆盖范围可用于快照测试吗？

是的，以及其他任何测试。

最后

俺叫小枫，一个成天想着一夜暴富的测试员

（1140267353）一起成长一起加油的伙伴群！软件测试，与你同行！
群内可领取最新软件测试大厂面试资料和Python自动化、接口、框架搭建学习资料！

点赞关注不迷路！！！【三连ღ】，有问题也可私聊哟~(*╹▽╹*)