跳到主要内容
版本:27.0

快照测试

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

一个典型的快照测试用例呈现一个UI组件,获取一个快照,然后将它与存储在测试旁边的引用快照文件进行比较。如果两个快照不匹配,测试将失败:更改是意外的,或者引用快照需要更新到UI组件的新版本。

jest的快照测试示例测试为一个链接组件:

进口 反应 “反应”
进口 渲染器 '反应测试渲染器'
进口 链接 '../link.react'
显示正确的 => {
const 渲染器
创造 < 链接 http://www.facebook.com. > Facebook 链接 >
托杰森
预计 tomatchsnapshot.
}

第一次测试运行时,Jest创建了一个快照文件看起来像这样:

出口 渲染正确1
className = "正常"
href =“http://www.facebook.com”
onmouseenter = {[函数]}
OnMouseLeave = {[功能]}
>
Facebook

快照工件应与代码更改一起提交,并作为代码审查流程的一部分进行审核。jest用途格式在代码审查期间制作快照人类可读。在后续测试运行中,Jest将使用上一个快照将渲染的输出进行比较。如果它们匹配,则测试将通过。如果它们不匹配,则测试赛跑者在代码中找到了一个错误(在<链接>在这种情况下的组件)应该是固定的,或者实现已更改,并且需要更新快照。

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

有关Snapshot测试的工作方式以及为什么我们建造它的更多信息发布博客文章yabo入口.我们建议阅读这个博客帖yabo入口子在您应该使用快照测试时获得良好的感觉。我们还建议看这个egghead视频与Jest的快照测试。

更新快照
//更新了与不同地址的链接的测试用例
显示正确的 => {
const 渲染器
创造 < 链接 http://www.instagram.com. > Instagram. 链接 >
托杰森
预计 tomatchsnapshot.
}

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

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

要解决这个问题,我们需要更新快照工件。你可以用一个标志来运行Jest,告诉它重新生成快照:

笑话——updateSnapshot

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

如果您想限制重新生成哪个快照测试用例,则可以传递额外的--testnamepattern.标志仅为与模式匹配的测试重新录制快照。

你可以通过克隆来试用这个功能快照示例,修改这一点链接组件,并运行Jest。

交互式快照模式

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

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

完成后,Jest将在返回观看模式之前为您提供摘要:

内联快照
显示正确的 => {
const 渲染器
创造 < 链接 https://example.com. > 例子 地点 链接 >
托杰森
预计 toMatchInlineSnapshot
}

下次跑步时,将被评估,并且将写入快照作为参数toMatchInlineSnapshot

显示正确的 => {
const 渲染器
创造 < 链接 https://example.com. > 例子 地点 链接 >
托杰森
预计 toMatchInlineSnapshot
className = "正常"
href =“https://example.com”
onmouseenter = {[函数]}
OnMouseLeave = {[功能]}
>
示例网站
}

就是这样!您甚至可以使用——updateSnapshot或者使用键入- 手表模式。

物业匹配器
'每次都会失败' => {
const 用户 {
创造 新的 日期
ID 数学 地面 数学 随机的 20.
名称 '勒布朗·詹姆斯'
}
预计 用户 tomatchsnapshot.
}
//快照
出口 每次都会失败1
目的 {
“创造”:2018-05-19T23:36:09.816z,
“ID”:3,
“姓名”:“勒布朗詹姆斯”,
}

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

'将检查匹配器并通过' => {
const 用户 {
创造 新的 日期
ID 数学 地面 数学 随机的 20.
名称 '勒布朗·詹姆斯'
}
预计 用户 tomatchsnapshot. {
创造 预计 任何 日期
ID 预计 任何 数字
}
}
//快照
出口 检查匹配器并通过1
目的 {
“createat”:任何<日期>,
“ID”:任何
“姓名”:“勒布朗詹姆斯”,
}

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

'将检查值并通过' => {
const 用户 {
创造 新的 日期
名称 '邦德......詹姆斯邦德'
}
预计 用户 tomatchsnapshot. {
创造 预计 任何 日期
名称 '邦德......詹姆斯邦德'
}
}
//快照
出口 将检查值并通过1
目的 {
“createat”:任何<日期>,
“姓名”:'邦德......詹姆斯邦德',
}

最佳实践1.将快照视为代码格式要使快照人类可读,但您可能会发现引入额外的工具非常有用,如eslint-plugin-jest有它没有大快照选项,或者快照 - 差异通过组件快照比较特性,可以促进提交简短、集中的断言。

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

2.测试应该是确定性的时钟组件使用date.now(),每次运行测试用例时,从此组件生成的快照将不同。在这种情况下,我们可以模仿Date.now()方法每次运行测试时返回一致的值:

日期 现在 笑话 FN. => 1482363367071

现在,每次快照测试用例运行时,date.now()将返回1482363367071一贯。这将导致此组件生成相同的快照,而无论运行测试。

3.使用描述性快照名称
出口 应该处理一些测试用例 空值
出口 应该处理一些其他测试用例
艾伦图灵

至:

出口 应该呈现null 空值
出口 应该是alan图灵
艾伦图灵

由于后者准确地描述了输出中期望的内容,所以更清楚地看到它什么时候是错误的:

出口 应该呈现null
艾伦图灵
出口 应该是alan图灵 空值

常见问题快照是否在持续集成(CI)系统上自动编写?应该提交快照文件吗?快照测试仅使用React组件吗?反应和原生组件是快照测试的一个好用例。然而,快照可以捕获任何可序列化的值,并且应该在目标测试输出是否正确时使用。Jest存储库包含许多测试Jest本身输出、Jest断言库输出以及来自Jest代码库各个部分的日志消息的示例。参见的示例快照CLI输出在jest回购中。

快照测试和视觉回归测试之间有什么区别?杰斯博客yabo入口.

快照测试替换单元测试吗?关于生成文件的速度和大小的快照测试的性能是什么?如何解决快照文件中的冲突?是否有可能使用快照测试应用测试驱动的开发原则?代码覆盖对快照测试有效吗?
编辑这个页面
上次更新了通过Simen Bekkhus.