跳转到主要内容< / div >
版本:26.x.

快照测试

每当你想要确保你的UI不会有意外的改变,快照测试是非常有用的工具。

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

jest的快照测试<一个class="hash-link" href="#snapshot-testing-with-jest" title="#“>#

在测试React组件时,可以采取类似的方法。在测试React组件时,可以采取类似的方法。而不是渲染需要构建整个应用程序的图形UI,而不是渲染构建整个应用程序,而是可以使用测试渲染器快速生成React Tree的可序列化值。考虑一下这一点<一个href="https://github.com/facebook/jest/blob/master/examples/snapshot/__tests__/link.react.test.js" target="_blank" rel="noopener noreferrer">示例测试为一个<一个href="https://github.com/facebook/jest/blob/master/examples/snapshot/Link.react.js" target="_blank" rel="noopener noreferrer">链接组件:<一个href="/zh-Hans/docs/tutorial-react">反应和<一个href="/zh-Hans/docs/tutorial-react-native">反应本地组件是快照测试的良好用例。但是,快照可以捕获任何可序列化值,并且应该随时使用目标测试输出是否正确。Jest存储库包含许多测试Jest本身的输出的示例,Jest的断言库的输出以及来自Jest Codebase的各个部分的日志消息。see<一个href="https://github.com/facebook/jest/blob/master/e2e/__tests__/console.test.ts" target="_blank" rel="noopener noreferrer">快照CLI输出在Jest回购。

进口 反应 “反应” ;
进口 渲染器 '反应测试渲染器' ;
进口 关联 '../link.react' ;
'渲染正确' = > {
常量 = 渲染器
创造 < 关联 页面 = http://www.facebook.com. > 脸谱网 关联 >
toJSON ;
预计 tomatchsnapshot. ;
} ;

第一次运行这个测试时,Jest创建一个<一个href="https://github.com/facebook/jest/blob/master/examples/snapshot/__tests__/__snapshots__/link.react.test.js.snap" target="_blank" rel="noopener noreferrer">快照文件看起来是这样的:

出口 [ ` 正确显示1 ` ] = `
<一个
classname =“正常”
href =“http://www.facebook.com”
onmouseenter = {[函数]}
OnMouseLeave = {[功能]}
>
脸谱网
< / >
` ;

快照工件应与代码更改一起提交,并作为代码审查流程的一部分进行审核。快照工件应与代码更改一起提交,并作为代码审查流程的一部分进行审核。jest用途<一个href="https://github.com/facebook/jest/tree/master/packages/pretty-format" target="_blank" rel="noopener noreferrer">漂亮格式在代码审查期间使快照为人可读。在随后的测试运行中,Jest将把呈现的输出与之前的快照进行比较。如果它们匹配,测试就会通过。如果它们不匹配,测试运行程序在您的代码中(在<链接>组件),否则实现已经更改,需要更新快照。在随后的测试运行中,Jest将把呈现的输出与之前的快照进行比较。如果它们匹配,测试就会通过。如果它们不匹配,测试运行程序在您的代码中(在<链接>组件),否则实现已经更改,需要更新快照。

注意:快照直接缩小到渲染的数据 - 在我们的示例中<链接/>组成部分页面道具传给了它。注意:快照直接缩小到渲染的数据 - 在我们的示例中<链接/>组成部分页面道具传给了它。这意味着,即使任何其他文件缺少道具(比如,app.js.)<链接/>组件,它仍将通过测试,因为测试不知道使用<链接/>组件,它只是范围link.reacect.js.。此外,在其他快照测试中呈现不同的道具的相同组件不会影响第一个,因为测试不对彼此了解。此外,在其他快照测试中呈现不同的道具的相同组件不会影响第一个,因为测试不对彼此了解。

关于快照测试如何工作以及我们为什么要构建它的更多信息可以在<一个href="//www.ieatrice.com/blog/2016/07/27/jest-14.html" target="_blank" rel="noopener noreferrer">发布博客文章yabo入口。我们建议阅读<一个href="http://benmccormick.org/2016/09/19/testing-with-jest-snapshots-first-impressions/" target="_blank" rel="noopener noreferrer">这个博客帖yabo入口子为了更好地理解什么时候应该使用快照测试。关于快照测试如何工作以及我们为什么要构建它的更多信息可以在<一个href="//www.ieatrice.com/blog/2016/07/27/jest-14.html" target="_blank" rel="noopener noreferrer">发布博客文章yabo入口。我们建议阅读<一个href="http://benmccormick.org/2016/09/19/testing-with-jest-snapshots-first-impressions/" target="_blank" rel="noopener noreferrer">这个博客帖yabo入口子为了更好地理解什么时候应该使用快照测试。我们也建议大家看这个<一个href="https://egghead.io/lessons/javascript-use-jest-s-snapshot-testing-feature?pl=testing-javascript-with-jest-a36c4074" target="_blank" rel="noopener noreferrer">egghead视频与Jest的快照测试。

更新快照<一个class="hash-link" href="#updating-snapshots" title="#“>#

在引入bug后,很容易发现快照测试失败。当这种情况发生时,请继续并修复问题,并确保您的快照测试再次通过。现在,让我们讨论一下由于有意的实现更改而导致快照测试失败的情况。当这种情况发生时,请继续并修复问题,并确保您的快照测试再次通过。现在,让我们讨论一下由于有意的实现更改而导致快照测试失败的情况。

如果我们有意更改示例中的Link组件所指向的地址,就可能出现这种情况。

//更新测试用例的链接到一个不同的地址
'渲染正确' = > {
常量 = 渲染器
创造 < 关联 页面 = http://www.instagram.com > Instagram 关联 >
toJSON ;
预计 tomatchsnapshot. ;
} ;

在这种情况下,Jest将打印此输出:

由于我们刚刚更新了组件,使其指向一个不同的地址,因此可以预期该组件的快照中会发生变化。由于我们刚刚更新了组件,使其指向一个不同的地址,因此可以预期该组件的快照中会发生变化。我们的快照测试用例失败了,因为我们更新组件的快照不再匹配这个测试用例的快照工件。

要解决此问题,我们需要更新我们的快照工件。要解决此问题,我们需要更新我们的快照工件。您可以使用一个标志运行jest,该标志将重新生成快照:

jest -updatesnapshot.

通过运行上面的命令继续持续并接受更改。您也可以使用等效的单个字符- u如果您愿意,标志将重新生成快照。这将重新生成所有失败的快照测试的快照伪像。如果由于无意的错误,我们有任何额外的失败快照测试,我们需要在重新生成快照之前修复错误以避免录制错误行为的快照。

如果您想要限制重新生成的快照测试用例,您可以通过一个附加的——testNamePattern标志仅为与模式匹配的测试重新录制快照。

你可以通过克隆来试用这个功能<一个href="https://github.com/facebook/jest/tree/master/examples/snapshot" target="_blank" rel="noopener noreferrer">快照示例那修改关联组件,并运行Jest。

交互式快照模式<一个class="hash-link" href="#interactive-snapshot-mode" title="#“>#

在Watch模式中也可以交互更新失败的快照:

输入交互式快照模式后,JEST会一次浏览失败的快照一次测试,并让您有机会查看失败的输出。

从这里开始,您可以选择更新该快照或跳至下一步:

一旦你完成,Jest会给你一个总结,然后返回到观看模式:

内联快照<一个class="hash-link" href="#inline-snapshots" title="#“>#

内联快照行为与外部快照相同(。折断文件),除了快照值会自动写回源代码。这意味着您可以获得自动生成快照的好处,而不必切换到外部文件以确保写入正确的值。这意味着您可以获得自动生成快照的好处,而不必切换到外部文件以确保写入正确的值。

内联快照供电<一个href =“https://prettier.io”target="_blank" rel="noopener noreferrer">漂亮。内联快照供电<一个href =“https://prettier.io”target="_blank" rel="noopener noreferrer">漂亮。要使用内联快照,您必须拥有漂亮安装在您的项目中。在写入测试文件时,您的漂亮配置会得到尊重。在写入测试文件时,您的漂亮配置会得到尊重。

如果你有漂亮安装在一个jest无法找到它的位置,您可以告诉Jest如何使用它使用的<一个href="/zh-Hans/docs/configuration">“prettierpath”配置属性。

例子:

首先,你写一个测试,打电话.toMatchInlineSnapshot ()无参数:

'渲染正确' = > {
常量 = 渲染器
创造 < 关联 页面 = https://prettier.io. > 漂亮 关联 >
toJSON ;
预计 tomatchinlinesnapshot. ;
} ;

下次你再跑杰斯特的时候将被评估,并且将写入快照作为参数tomatchinlinesnapshot.

'渲染正确' = > {
常量 = 渲染器
创造 < 关联 页面 = https://prettier.io. > 漂亮 关联 >
toJSON ;
预计 tomatchinlinesnapshot. `
<一个
classname =“正常”
href =“https://prettier.io”
onmouseenter = {[函数]}
OnMouseLeave = {[功能]}
>
漂亮
< / >
` ;
} ;

就是这样!就是这样!你甚至可以用- updatesnapshot.或者使用关键在——看模式。

物业匹配器<一个class="hash-link" href="#property-matchers" title="#“>#

通常存在要生成的对象中的字段(如ID和日期)。通常存在要生成的对象中的字段(如ID和日期)。如果您尝试快照这些对象,它们将强制快照失败,每次运行都会失败:

“每次都会失败” = > {
常量 用户 = {
创造 日期
ID 数学 地板上 数学 随机 * 20.
的名字 “詹姆斯”
} ;
预计 用户 tomatchsnapshot. ;
} ;
/ /快照
出口 [ ` 每次都会失败1 ` ] = `
对象{
“创造”:2018-05-19T23:36:09.816z,
“ID”:3,
“名称”:“詹姆斯”,
}
` ;

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

'将检查匹配器并通过' = > {
常量 用户 = {
创造 日期
ID 数学 地板上 数学 随机 * 20.
的名字 “詹姆斯”
} ;
预计 用户 tomatchsnapshot. {
创造 预计 任何 日期
ID 预计 任何 数量
} ;
} ;
/ /快照
出口 [ ` 将检查匹配器并通过1 ` ] = `
对象{
“createdAt”:任何<日期>,
“ID”:任何
“名称”:“詹姆斯”,
}
` ;

没有匹配器的任何给定值都将被完全检查并保存到快照:

'将检查值并通过' = > {
常量 用户 = {
创造 日期
的名字 “键…詹姆斯·邦德”
} ;
预计 用户 tomatchsnapshot. {
创造 预计 任何 日期
的名字 '债券......它(' 将检查值并通过' = > {
常量 用户 = {
创造 日期
的名字 “键…詹姆斯·邦德”
} ;
预计 用户 tomatchsnapshot. {
创造 预计 任何 日期
的名字 “键…詹姆斯·邦德”
} ;
} ;
/ /快照
出口 [ ` 将检查值和传递1 ` ] = `
对象{
“createdAt”:任何<日期>,
“名称”:“债券……詹姆斯•邦德”,
}
` ; 詹姆士 债券 '
}
` ;

最佳实践<一个class="hash-link" href="#best-practices" title="#“>#

快照是一个很棒的工具,用于识别您的应用程序中的意外接口更改 - 是否该接口是API响应,UI,日志或错误消息。与任何测试策略一样,您应该了解一些最佳实践,并且您应该遵循的指导方针,以便有效地使用它们。与任何测试策略一样,您应该了解一些最佳实践,并且您应该遵循的指导方针,以便有效地使用它们。

1. 1.将快照视为代码<一个class="hash-link" href="#1-1-treat-snapshots-as-code" title="#“>#

提交快照并将其作为常规代码审查过程的一部分进行审查。提交快照并将其作为常规代码审查过程的一部分进行审查。这意味着像对待项目中的任何其他类型的测试或代码一样对待快照。

确保您的快照可以通过使它们重点,短,以及使用强制执行这些风格型约的工具来读取。

如前所述,Jest使用<一个href="https://yarnpkg.com/en/package/pretty-format" target="_blank" rel="noopener noreferrer">漂亮格式使快照为人可读,但您可能会发现引入其他工具是有用的,比如<一个href="https://yarnpkg.com/en/package/eslint-plugin-jest" target="_blank" rel="noopener noreferrer">eslint-plugin-jest有它<一个href="https://github.com/jest-community/eslint-plugin-jest/blob/master/docs/rules/no-large-snapshots.md" target="_blank" rel="noopener noreferrer">no-large-snapshots选项,或者<一个href="https://yarnpkg.com/en/package/snapshot-diff" target="_blank" rel="noopener noreferrer">snapshot-diff使用其组件快照比较功能,以提升简短,重点的断言。

目标是让您轻松查看拉拉请求中的快照,并在测试套件失败时违背再生快照的习惯,而不是检查其失败的根本原因。

2.2.测试应该是确定性的<一个class="hash-link" href="#2-2-tests-should-be-deterministic" title="#“>#

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

例如,如果你有一个<一个href="https://github.com/facebook/jest/blob/master/examples/snapshot/Clock.react.js" target="_blank" rel="noopener noreferrer">钟组件使用date.now(),每次运行测试用例时,从该组件生成的快照将是不同的。在这种情况下,我们可以<一个href="/zh-Hans/docs/mock-functions">模拟date.now()方法以在每次运行测试时返回一致的值:在这种情况下,我们可以<一个href="/zh-Hans/docs/mock-functions">模拟date.now()方法每次运行测试时返回一致的值:

日期 现在 = 开玩笑 fn = > 1482363367071 ;

现在,每次快照测试用例都运行,date.now()将返回1482363367071保持一致。这将导致为该组件生成相同的快照,而不管测试何时运行。这将导致为该组件生成相同的快照,而不管测试何时运行。

3.3.使用描述性快照名称<一个class="hash-link" href="#3-3-use-descriptive-snapshot-names" title="#“>#

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

例如,比较:

出口 [ ` <用户名/>应该处理一些测试用例 ` ] = ` ` ;
出口 [ ` 应该处理一些其他测试用例 ` ] = `
艾伦图灵
< / div >
` ;

到:

出口 [ ` 应该呈现null ` ] = ` ` ;
出口 [ ` 应该渲染Alan Turing ` ] = `
艾伦图灵
< / div >
` ;

由于后来描述了在输出中的预期预期,因此更清楚地看到它是错误的:

出口 [ ` 应该呈现null ` ] = `
艾伦图灵
< / div >
` ;
出口 [ ` 应该渲染Alan Turing ` ] = ` ` ;

经常问的问题<一个class="hash-link" href="#frequently-asked-questions" title="#“>#

是否在连续集成(CI)系统上自动写入快照?<一个class="hash-link" href="#are-snapshots-written-automatically-on-continuous-integration-ci-systems" title="#“>#

不,从Jest 20开始,在没有显式传递的情况下,Jest在CI系统中运行时,不会自动写入Jest中的快照- updatesnapshot.。预计所有快照都是在CI上运行的代码的一部分,由于新的快照自动通过,它们不应该通过CI系统上的测试运行。建议始终提交所有快照,并将它们保持在版本控制中。预计所有快照都是在CI上运行的代码的一部分,由于新的快照自动通过,它们不应该通过CI系统上的测试运行。建议始终提交所有快照,并将它们保持在版本控制中。

应该提交快照文件吗?<一个class="hash-link" href="#should-snapshot-files-be-committed" title="#“>#

是的,所有快照文件应该与他们覆盖的模块和他们的测试一起提交。它们应该被视为测试的一部分,类似于Jest中任何其他断言的值。事实上,快照表示源模块在任何给定时间点的状态。通过这种方式,当源模块被修改时,Jest可以知道与以前的版本有什么不同。它还可以在代码评审期间提供大量额外的上下文,评审者可以在其中更好地研究您的更改。它们应该被视为测试的一部分,类似于Jest中任何其他断言的值。事实上,快照表示源模块在任何给定时间点的状态。通过这种方式,当源模块被修改时,Jest可以知道与以前的版本有什么不同。它还可以在代码评审期间提供大量额外的上下文,评审者可以在其中更好地研究您的更改。

快照测试仅使用React组件吗?<一个class="hash-link" href="#does-snapshot-testing-only-work-with-react-components" title="#“>#

反应和<一个href="//www.ieatrice.com/zh-Hans/docs/tutorial-react-native">反应本地组件是快照测试的良好用例。但是,快照可以捕获任何可序列化值,并且应该随时使用目标测试输出是否正确。Jest存储库包含许多测试Jest本身的输出的示例,Jest的断言库的输出以及来自Jest Codebase的各个部分的日志消息。see<一个href="https://github.com/facebook/jest/blob/master/e2e/__tests__/console.test.ts" target="_blank" rel="noopener noreferrer">快照CLI输出在Jest回购。

快照测试和视觉回归测试之间有什么区别?<一个class="hash-link" href="#whats-the-difference-between-snapshot-testing-and-visual-regression-testing" title="#“>#

快照测试和视觉回归测试是测试UIS的两种不同方式,它们提供不同的目的。视觉回归测试工具拍摄网页的屏幕截图,并通过像素比较所得到的图像像素。使用快照测试值序列化,存储在文本文件中,并使用Diff算法进行比较。有不同的权衡要考虑,我们列出了在内置快照测试的原因<一个href="//www.ieatrice.com/blog/2016/07/27/jest-14.html" target="_blank" rel="noopener noreferrer">Jest的yabo入口博客。视觉回归测试工具拍摄网页的屏幕截图,并通过像素比较所得到的图像像素。使用快照测试值序列化,存储在文本文件中,并使用Diff算法进行比较。有不同的权衡要考虑,我们列出了在内置快照测试的原因<一个href="//www.ieatrice.com/blog/2016/07/27/jest-14.html" target="_blank" rel="noopener noreferrer">Jest的yabo入口博客

快照测试替换单元测试吗?<一个class="hash-link" href="#does-snapshot-testing-replace-unit-testing" title="#“>#

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

关于生成文件的速度和大小,快照测试的性能如何?<一个class="hash-link" href="#what-is-the-performance-of-snapshot-testing-regarding-speed-and-size-of-the-generated-files" title="#“>#

Jest已经根据性能考虑进行了重写,快照测试也不例外。因为快照存储在文本文件中,所以这种测试方法是快速和可靠的。对象调用的每个测试文件都会生成一个新文件tomatchsnapshot.匹配器。快照的大小非常小:作为参考,Jest代码库中所有快照文件的大小都小于300 KB。

如何解决快照文件中的冲突?<一个class="hash-link" href="#how-do-i-resolve-conflicts-within-snapshot-files" title="#“>#

快照文件必须始终表示他们正在覆盖的模块的当前状态。快照文件必须始终表示他们正在覆盖的模块的当前状态。因此,如果要合并两个分支并在快照文件中遇到冲突,则可以通过运行Jest并检查结果来手动解析冲突或更新快照文件。

在快照测试中应用测试驱动的开发原则是可能的吗?<一个class="hash-link" href="#is-it-possible-to-apply-test-driven-development-principles-with-snapshot-testing" title="#“>#

虽然可以手动编写快照文件,但通常不平移。虽然可以手动编写快照文件,但通常不平移。快照有助于弄清楚测试亚搏取款所涵盖的模块的输出是否已更改,而不是指导首先要设计代码。

代码覆盖是否使用快照测试?<一个class="hash-link" href="#does-code-coverage-work-with-snapshot-testing" title="#“>#

是的,其他测试也一样。