跳到主要内容
版本:26.倍

快照测试

每当您想要确保您的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将在返回观看模式之前为您提供摘要:

内联快照更漂亮。要使用内联快照,您必须拥有漂亮安装在您的项目中。写入测试文件时,您将遵守更漂亮的配置。

如果你有漂亮安装在一个jest无法找到它的位置,您可以告诉Jest如何使用它使用的“prettierPath”配置属性。

例子:

首先,你写一个测试,打电话.tomatchinlinesnapshot()没有参数:

( 显示正确的 , ( ) => {
const = 渲染器
创建 ( < 链接 = https://prettier.io. > 更漂亮 链接 > )
托杰森 ( ) ;
预计 ( ) toMatchInlineSnapshot ( ) ;
} ) ;

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

( 显示正确的 , ( ) => {
const = 渲染器
创建 ( < 链接 = https://prettier.io. > 更漂亮 链接 > )
托杰森 ( ) ;
预计 ( ) toMatchInlineSnapshot (
className = "正常"
href =“https://prettier.io”
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入口。

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