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

测试con Instantanea

我们在instantánea做了测试,我在这里做了一个宽的题目,因为我没有在外面工作。

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

ComprobaciónInstantáneaConjest<一个class="hash-link" href="#comprobación-instantánea-con-jest" title="#”>#

SE PUEDE TOMAR联合国进食类似CUANDO SE TRATA DE COMPOROBAR TUS组分DE反应。en Lugar de Thinear La Interfica de Usuario,L​​o CualRequeriríaStransuirLa App En Suitidad,SE Puede Un Renderer De TestsParaRápidamenteWenerar联合国Valor可序列化议程达Árbolde反应。考虑一下这一点<一个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">链接组件:

进口 反应 “反应” ;
进口 渲染器 “react-test-renderer” ;
进口 链接 “. . / Link.react” ;
( 显示正确的 , ( ) = > {
const = 渲染器
创建 ( < 链接 = http://www.facebook.com > 脸谱网 链接 > )
toJSON ( ) ;
预计 ( ) tomatchsnapshot. ( ) ;
} ) ;

La Primera Vez Que Este Test Se Ejecuta,Jest Crea联合国<一个href="https://github.com/facebook/jest/blob/master/examples/snapshot/__tests__/__snapshots__/link.react.test.js.snap" target="_blank" rel="noopener noreferrer">Archivo deInstantánea.请说así:

出口 ( 渲染正确1 ] =
<一个
className = "正常"
href = " http://www.facebook.com "
onMouseEnter ={[功能]}
onMouseLeave ={[功能]}
>
脸谱网
;

El Artefacto de LaInstantáneaBebeSerupluído(COMMIT)Con Los Cambios en ElCódigo,Y Revisado Como Parte de laRevisióndeCódigo。Jest Utiliza.<一个href="https://github.com/facebook/jest/tree/master/packages/pretty-format" target="_blank" rel="noopener noreferrer">“格式”para crear instantáneas legibles durante la revisión de código。在随后的测试运行中,Jest将将呈现的输出与前一个快照进行比较。Si巧合,pasará el试验。如果它们不匹配,要么测试运行程序在您的代码中发现了一个bug(在<链接>组件),或者实现已经更改,需要更新快照。

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

PuedeEncontrassmásfeconaciónsobrecómoficionalacomkobacióndeInstantáneayy porquélahemos transuido en el<一个href="//www.ieatrice.com/blog/2016/07/27/jest-14.html" target="_blank" rel="noopener noreferrer">Post de lanzamiento del博yabo入口客。Recomendamos Leer.<一个href="http://benmccormick.org/2016/09/19/testing-with-jest-snapshots-first-impressions/" target="_blank" rel="noopener noreferrer">este post del yabo入口blog把宽的想法交给debería usar comprobación instantánea。我们也建议大家看看这个<一个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进行快照测试。

ActualizandoInstantáneas.<一个class="hash-link" href="#actualizando-instantáneas" title="#”>#

这很可能是fácil发现宽的地方,并在instantánea falla después介绍联合国bug。你的问题是什么,你的问题是什么,你的问题是什么,你的问题是什么,你的问题是什么,你的问题是什么?continuación vamos A hablar sobre el caso de cuando un test de instantánea está fallando debido A un cambio intencionado在implementación。

你可以situación我可以把你的名字告诉你dirección把你的名字告诉你的朋友。

// estuche de prueba actualizado con un链接dirección distata
( 显示正确的 , ( ) = > {
const = 渲染器
创建 ( < 链接 = http://www.instagram.com. > Instagram. 链接 > )
toJSON ( ) ;
预计 ( ) tomatchsnapshot. ( ) ;
} ) ;

如果是这样,就开玩笑imprimirá esta salida:

Ya quesólo实际核核糖组成段que apunte a Unadireccióndiferente,es razonable esperar cambios en laInstantáneade Este Componente。Nuestro Test deInstantáneaEstáFallandoPorqueLaInstantáneadeMestroComponente Actualizado Ya No Concuerda Con El Artfacto deInstantáneaspara Este Caso De Test。

Para Regarver Esto,Necesitamos Astaligatizar Nuestros Artefactos deInstantánea。Puede ejecutar jest con联合国“旗帜”que lediráquevuelva awerlar lasInstantáneas:

笑话——updateSnapshot

我接受前面的刀口。También puede utilzar等效carácter único“旗帜”-Upara volver a general instantáneas si lo prefiere。到volverá a general los artefactos de instantánea para todos los tests de instantánea fallidos。Si tuviéramos cualquier test de instantánea fallido aditiononado a un bug no intencionado, necesitaríamos arreglar el“bug”antes de volver a general instantáneas para impedir grabar instantáneas con un comportamiento deftuoso。

如果测试的目的是限制instantáneos,那么就会有一个一般的标志:--nombretestpatrón.para volver a grabar instantáneas sólo para esos对patrón的巧合测试。

这可能是一种克隆的功能<一个href="https://github.com/facebook/jest/tree/master/examples/snapshot" target="_blank" rel="noopener noreferrer">Ejemero deInstantánea., modificando el componenteEnlance,y ejecutando jest。

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

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

一旦您进入交互式快照模式,Jest就会逐一介绍失败的快照测试,并让您有机会检查失败的输出。

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

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

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

内联快照的行为与外部快照相同(.snap文件),除非快照值将自动写入源代码。这意味着您可以获得自动生成的快照的好处,而无需切换到外部文件以确保写入正确的值。

内嵌快照由<一个href = " https://prettier.io "target="_blank" rel="noopener noreferrer">更漂亮。要使用内嵌快照,您必须拥有更漂亮安装在您的项目中。写入测试文件时,您将遵守更漂亮的配置。

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

例子:

首先,您编写一个测试,调用.toMatchInlineSnapshot ()无参数:

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

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

( 显示正确的 , ( ) = > {
const = 渲染器
创建 ( < 链接 = https://prettier.io > 更漂亮 链接 > )
toJSON ( ) ;
预计 ( ) toMatchInlineSnapshot (
<一个
className = "正常"
href = " https://prettier.io "
onMouseEnter ={[功能]}
onMouseLeave ={[功能]}
>
更漂亮
) ;
} ) ;

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

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

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

( '每次都会失败' , ( ) = > {
const 用户 = {
创造 : 日期 ( ) ,
ID : 数学 地板上 ( 数学 随机的 ( ) * 20. ) ,
姓名 : '勒布朗·詹姆斯' ,
} ;
预计 ( 用户 ) tomatchsnapshot. ( ) ;
} ) ;
//快照
出口 ( 每次都会失败吗 ] =
目的 {
“createdAt”:2018 - 05 - 19 t23:36:09.816z
“id”:3,
“姓名”:“勒布朗詹姆斯”,
}
;

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

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

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

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

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

快照是识别应用程序中未预料到的接口变化的神奇工具——无论该接口是API响应、UI、日志还是错误消息。对于任何测试策略,都有一些您应该了解的最佳实践,以及您应该遵循的指导方针,以便有效地使用它们。

1.将快照视为代码<一个class="hash-link" href="#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">没有大快照选项,或<一个href="https://yarnpkg.com/en/package/snapshot-diff" target="_blank" rel="noopener noreferrer">快照 - 差异其组件快照比较功能,以促进提交简短、有重点的断言。

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

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

LOS测试reben ser确定列表。在没有改变的组件上运行相同的测试应该每次产生相同的结果。Usted ES响应DE ASEGURAR QUE SUSInstantáneasWEARADAS没有包含InterfyenInformaCiónsecthecíficasobre la plataforma o Cualquier OtraInformaciónque没有海上测定ista。

我们有一个组成部分<一个href="https://github.com/facebook/jest/blob/master/examples/snapshot/Clock.react.js" target="_blank" rel="noopener noreferrer">RELOJ.是它date.now(),LaInstantáneaQue Se Heaen A Bill De Este CompanceeSeráfierenteCadaVezQue Se Ejecuta El Caso de测试。en Este Caso Se Puede创造联合国<一个href="/es-ES/docs/mock-functions">“mock”del método Date.now()Para Devolver Un Valor Constante Cada Vez Que La Prueba Se Ejecuta:

日期 现在 = 笑话 FN. ( ( ) = > 1482363367071 ) ;

我们可以把它排除在prueba的测试中instantánea,date.now()devuelve1482363367071consistentemente。到resultará在misma instantánea所有的独立部件都可以进行测试。

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

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

例如,比较:

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

答:

出口 ( 应该渲染null ] = ;
出口 ( 应该是alan图灵 ] =
< div >
艾伦图灵
;

因为后者准确地描述了输出中所期望的内容,所以当它出错时,可以更清楚地看到:

出口 ( 应该渲染null ] =
< div >
艾伦图灵
;
出口 ( 应该是alan图灵 ] = ;

Preguntas frecuentes.<一个class="hash-link" href="#preguntas-frecuentes" title="#”>#

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

否,如同jest 20,当Jest在CI系统中运行时,Jest中的快照不会自动编写,而无明确传递——updateSnapshot。请告诉我instantáneas请告诉我código你在这里喷射,你在这里喷射,你在这里喷射instantáneas pasan automáticamente,不,deberían你在这里喷射测试。我们将继续向您保证instantáneas对版本的控制。

¿借助于instantáneasser包含en“compits”?<一个class="hash-link" href="#¿deben-los-archivos-de-instantáneas-ser-incluidos-en-commits" title="#”>#

Sí,从instantánea的档案中可以“提交”到módulos的están库布里endo系统的测试。它们应该被视为测试的一部分,类似于Jest中的任何其他断言的值。他的地址是instantáneas他是洛斯州的代表módulos。这是你的生日,你的生日是你的生日módulos,你的生日是你的生日versión在前面。También我们可以根据不同的上下文来选择杜兰特网址revisión del código在这里我们可以修改我们的学习和学习。

¿洛杉矶测试deInstantáneasolo funcionan con组件de反应?<一个class="hash-link" href="#¿los-tests-de-instantánea-solo-funcionan-con-components-de-react" title="#”>#

de Los组件<一个href="/es-ES/docs/tutorial-react">反应y<一个href="/es-ES/docs/tutorial-react-native">原生Son Un Buen Caso de Uso Para Tests deInstantánea。SIN Embargo,LasInstantáneasPuedenCapturar Cualquier Valor Serializable Y Puede Unare En Culquier Momento EN Que El Objetivo Sea Comkobar Si El结果eS escredo。El Repositorio de Jest Contiene Muchos Ejeveros del“Output”De Jest EnSíMismo,El“Output”De LaLiberíadeFirmacióndeJest,AsíCoMensajesde“log”de Varias Pitter de la Base deCódigode Jest。see<一个href="https://github.com/facebook/jest/blob/master/e2e/__tests__/console.test.ts" target="_blank" rel="noopener noreferrer">快照CLI输出在jest回购中。

¿Cuáles la diferencia entre tests deInstantáneaytests deRegresióncapisha<一个class="hash-link" href="#¿cuál-es-la-diferencia-entre-tests-de-instantánea-y-tests-de-regresión-visual" title="#”>#

测试instantánea y测试regresión visual son dos maneras distintas de testear interface de usuario, y cumplen dos objjetivos different。测试的结果是regresión视觉捕捉的结果是pantalla的结果páginas web与imágenes逐像素比较。通过快照,测试值被序列化,存储在文本文件中,并使用diff算法进行比较。在instantánea fueron construídos的测试中存在不同的测试项和不同的测试项,并有一个可供列举的测试项<一个href="//www.ieatrice.com/blog/2016/07/27/jest-14.html" target="_blank" rel="noopener noreferrer">yabo入口博客de Jest.。

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

Los Tests deInstantánea每SeEssóloUna delasmásde 20 Afirmaciones QueEstán包含en Jest。快照测试的目的不是更换现有的单元测试,而是提供额外的值并使测试无痛。en Algunos Escenarios,Los Tests DeInstantáneaPuedenPotencialmente Eliminar La Necesidad De Tests Unitarios Para联合Conjunto特定De Funcionicalades(Por Ejemello Componentes de React),PeroTambiénPuedenCaexistir。

Cuál从instantáneas到tamaño的测试速度是多少?<一个class="hash-link" href="#¿cuál-es-el-rendimiento-de-tests-de-instantáneas-en-cuanto-a-velocidad-y-tamaño-de-los-archivos-generados" title="#”>#

你可以把你的想法写在下面,你可以把instantánea写在下面excepción。你在instantáneas的阿尔马塞纳在德克萨斯的archivos中,它的形式是rápida y。这是一份新的档案,它是一份关于使用马卡多的测试档案tomatchsnapshot.。快照的大小非常小:作为参考,Jest代码基本身中所有快照文件的大小都小于300 KB。

¿Cómoresuelvo冲突德罗德阿什凡斯德Instantáneas?<一个class="hash-link" href="#¿cómo-resuelvo-conflictos-dentro-de-archivos-de-instantáneas" title="#”>#

我的档案是instantáneas,我是我的实际代理人módulos están库布里恩多。因此,如果您正在合并两个分支并在快照文件中遇到冲突,那么您可以手动解决冲突,或者通过运行Jest并检查结果来更新快照文件。

¿es posible aplicar los prinipios de desarrollo orientado a pruebas con tests deInstantánea?<一个class="hash-link" href="#¿es-posible-aplicar-los-principios-de-desarrollo-orientado-a-pruebas-con-tests-de-instantánea" title="#”>#

可能在instantáneas手册中,没有可用的手册。快照有助于确定测试涵亚搏取款盖的模块的输出是否发生了更改,而不是在一开始就提供设计代码的指导。

代码覆盖率与快照测试一起工作吗?<一个class="hash-link" href="#does-code-coverage-work-with-snapshot-testing" title="#”>#

是的,和其他测试一样。