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

Тестированиеприпомошиснимков

Тестированиесиспользованиемснимковэтооченьполезныйинструментвситуацияхгдевыхотитебытьуверены,чтовашпользовательскийинтерфейснеизменяетсянеожиданнымобразом。

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

Тестированиесиспользованиемснимковвввest示例测试对于一个连接组件

进口 反应 “反应” ;
进口 渲染器 '反应测试渲染器' ;
进口 关联 '../link.react' ;
'渲染正确' => {
常量 = 渲染器
创造 < 关联 页面 = http://www.facebook.com. > Facebook 关联 >
托杰森 ;
预计 toMatchSnapshot ;
} ;

При первом запуске теста, Jest создаетфайлсоснимком, который выглядит следующим образом:

出口 [ ` отображаетсякорректно1 ` ] = `
classname =“正常”
href =“http://www.facebook.com”
onmouseenter = {[函数]}
OnMouseLeave = {[功能]}
>
Facebook
< / >
` ;

Данныйартефактснимкаследуетзанестивсистемуконтроляверсийнарядусизменениямивкодекакчастьвашегопроцессапоревьюкода。Jestиспользует漂亮格式длятого,чтобысделатьснимкиподходяшимидлятиялюдьмивовремяпроцессапоревьюкода。在后续测试运行中,Jest将使用上一个快照将渲染的输出进行比较。Еслионисовпадашт,ТоТестУспешнозавершится。如果它们不匹配,则测试赛跑者在代码中找到了一个错误(在<链接>组件),否则实现已经更改,需要更新快照。

注意:快照直接作用域为您呈现的数据—在我们的示例中<链接/>组成部分页面道具传给了它。这意味着,即使任何其他文件缺少道具(比如,App.js) 在里面<链接/>组件,它仍将通过测试,因为测试不知道使用<链接/>组件,它只是范围Link.react.js。另外,在其他快照测试中使用不同的道具呈现相同的组件不会影响第一个,因为这些测试彼此不知道。

БолееподробнушинформациюотомКактестированиесиспользованиемснимковРаботаетипочемумыеереализовалиможнонайтивданнойЗаписи.Нашегоблога。МерекомендуемознакомитьсясоСледушейзаписью.,чтобыполучитьхорошеепредставлениеотом,Когдаиспользоватьтестированиесиспользованиемснимков。我们还建议看这个egghead视频使用Jest进行快照测试。

Обновлениеснимков
//更新测试用例的链接到一个不同的地址
'渲染正确' => {
常量 = 渲染器
创造 < 关联 页面 = http://www.instagram.com. > Instagram 关联 >
托杰森 ;
预计 toMatchSnapshot ;
} ;

ВэтомСлучаеjjведетследушеесообщение:

ТакКакМытолькотоизменилинашКомпонентТак,чтобыонуказывалнадругойАдрес,ТоразумноожидатьизмененийвснимкештогоКомпонента。НаюТестСИСпользованиемснимкапроваливаетсяпотому,чтотекушийснимокБолеенесовпадаетссохраненным。

чтобырешитьштупроблему,НамНужноБудетобновитьсохраненныйснимок。ВыможетезапуститьJestсфлагом,Которыйукажетнанеобходимостьпобхорнойгенерацииснимков:

jest -updatesnapshot.

Неждитеиприменитевнесенныеизменения,выполнивкомандууказаннуювыше。Вытакжеможетеиспользоватьэквивалентныйодносимвольныйфлаг-Uдляповторногосозданияснимков,еслипредпочитаете。Этосоздастисохранитновыйснимокдлявсехпроваливающихсятестовиспользующихснимки。Еслибысуществовалидополнительныепроваливающиесятестыввидунепреднамеренныхнеполадок,намбыпонадобилосьисправитьнеполадкипередобновлениемснимков,чтобыизбежатьсохраненияснимковснеполадкамивповедении。

Есливыхотитеограничитьто,какиеснимкибудутсохраненызаново,выможетеуказатьдополнительныйфлаг--testnamepatterдлясохраненияСнимковЛишьдлятехтестов,Которыесовпадаштсуказаннымшаблоном。

ВыможетеопробоватьданныйфункционалКлонировавПримерСнимка,изменивКомпонент.关联изапустивEmest。

交互式快照模式

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

从这里您可以选择更新该快照或跳到下一个快照:

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

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

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

例子:

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

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

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

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

这里的所有都是它的!您甚至可以使用快照更新- updatesnapshot.或者使用关键在——看模式。

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

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

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

任何非匹配器的给定值都会被检查并保存到快照中:

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

最佳实践1.将快照视为代码漂亮格式要使快照人类可读,但您可能会发现引入额外的工具非常有用,如eslint-plugin-jest有它没有大快照选项,或者snapshot-diff使用其组件快照比较功能,以提升简短,重点的断言。

其目标是使在pull请求中查看快照变得容易,并克服在测试套件失败时重新生成快照的习惯,而不是检查其失败的根本原因。

2.测试应该是确定性的那которыйиспользуетDate.now (),ТОСнимокСгенерированныйдляэтогоКомпонентаБудетРазнымкаждыйраз,Когдавызапускаететест。ВэтомслучаемыможемСоздатьмокдляметодаday.now(),чтобывозврашатьфиксированноезначениеприкаждомзапускетеста:

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

Теперь при каждом запуске теста,Date.now ()будет постоянно возвращать значение1482363367071。этоприведетКТому,чтодляданногоКомпонентаБудетСоздаватьсяОдинитотеснимокнезависимооттого,Когдатестзапускается。

3.使用描述性快照名称
出口 [ ` <用户名/>应该处理一些测试用例 ` ] = ` 空值 ` ;
出口 [ ` 应该处理其他一些测试用例 ` ] = `
阿兰·图灵
< / div >
` ;

:

出口 [ ` 应该呈现null ` ] = ` 空值 ` ;
出口 [ ` 应该是alan图灵 ` ] = `
阿兰·图灵
< / div >
` ;

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

出口 [ ` 应该呈现null ` ] = `
阿兰·图灵
< / div >
` ;
出口 [ ` 应该是alan图灵 ` ] = ` 空值 ` ;

частозадаваемыевопросы.是否在连续集成(CI)系统上自动写入快照?Нужно ли коммитить файлы со снимками?СнимкиработаютТольковтестахсскомпонентами?反应и.。反应本地- хорошиепримерытого,гдеможноприменятьтестысоснимками。Однако,СнимкиМогутсодержатьлюбыесериализуемыеданные,Иихвсегдаследуетиспользовать,Еслицельтеста - Проверкакорректностивывода。Врепозитории玩笑естьмножествопримеровтестированиявывода玩笑,встроеннойвнегобиблиотекиassert'ов,атакжелогированиясобытийвразличныхчастяхкодовойбазы玩笑。see快照CLI输出在Jest回购。

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

快照测试替换单元测试吗?关于生成文件的速度和大小的快照测试的性能是什么?如何解决快照文件中的冲突?在快照测试中应用测试驱动的开发原则是可能的吗?Работаетлипокрытиетестамистестированиемснимков?