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

teste de snapshot.

Testes de SnapshotSãoFerramentasBemúteissemper quevocêdesejar garantir que sua uinãoseja interadamente。

典型的快照测试用例呈现UI组件,拍摄快照,然后将其与在测试中存储的引用快照文件进行比较。o testearáfalharse作为duas imagensnãocoincidirem:quer amudançaseja inesperada,ou a captura de tela precisa ser atualizada para a novaVersãodo Component da Ui。

Testes de Snapshot Com Jest审查de teste.你m simple.Componente de Link.:

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

Primeira Vez Que EsseTesteéecoputado,Jest Cria UmArquivo de Snapshot.que se parece com是:

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

o Artefato Do Snapshot Deve Ser Comitado(Compitted,EmInglês)Junto ComasAlteraçõesdeCódigo,e Revisado Como Parte de Seu Processo deRevisãodeCódigo。杰斯兰漂亮格式Para Fazer快照LegívisDuranteARevisão做Código。在后续测试运行中,Jest将使用上一个快照将渲染的输出进行比较。Se Eles Coincidirem,O TestePassará。如果它们不匹配,则测试赛跑者在代码中找到了一个错误(在<链接>在这种情况下的组件)应该是固定的,或者实现已更改,并且需要更新快照。

注意:快照直接缩小到渲染的数据 - 在我们的示例中<链接/>组成部分道具传递给它。这意味着即使任何其他文件都缺少道具(例如,app.js.) 在里面<链接/>组件,它仍将通过测试,因为测试不知道使用<链接/>组件,它只是范围link.reacect.js.。Alémdisso,译者o Mesmo Compounde Com Propriedades Diferentes Em Outros Testes de SnapshotNãoFetaráoPrimeiro,Como OS TestesNãoSEConhecem。

MaisInformaçõessobrecomo testes de快照funcionam e por que ocrantuímospodem ser encontradas noPost delançamento没有博客yabo入口。nósrecomendamos ler.埃斯特邮政没有博客yabo入口Para Obter Uma Boa Base de QuandovocêDeveUsar Teste De Snapshot。TambémRecomendamos Assistir EsteVídeo没有egghead.sobre testes de snapshot com jest。

atualizando快照
// caso de teste atualizado com um link para umendereçodiferente
'renderiza corretamee' => {
const = 渲染器
创造 < 关联 = http://www.instagram.com. > Instagram. 关联 >
托杰森 ;
预计 tomatchsnapshot. ;
} ;

Nesse Caso,JestIráMellimirEstaSaída:

Uma Vez Que Acabamos de Atualizar Nosso Compounde Para Apontar Para UmEndereçoFiferente,éRazoávelesperarMudanças没有快照Para Este Componente。nosso caso de teste de Snapshotestáfalhandoporque o快照帕拉·纳索组成部分atualizadojánãoceindidecom o artefato de snapshot para este caso de teste。

Para Regarver Esse有问题,Precisamos Atualizar Nossos Artefatos De Snapshot。Vocêpode executar jest com uma flag queirádizer para re-gerar快照:

jest -updatesnapshot.

Vámfrentee Aceite asAlteraçõesexecutando o Comando Acima。VocêTambémpode usar ocaractereúnico同期-UComo国旗Para Re-Gerar Snapshots,SE Preplir。ISSOIráRe-Gerar Artefatos De Snapshot Para Todos Testes de Snapshot Que Falharam。setivésemosmais algum teste de快照falhando devido一个um bugnãoincencional,precisamos corrigir o bug antes de重新gerar快照para evitar agravaçãode snapshot do bug。

Se vostaria de limitar Quais Casos de Teste Snapshot Devem Ser Gerados Nevanteme,VocêPodePassar Uma Flag Adicional--testnamepattern.Para Re-gravar快照有明天帕拉水腹睾丸验证que redeardem aopadrão。

录音博士实验索引Funcionaladade Por Clonar o审查de snapshot.,Modificanto O Componsee关联e executando jest。

Modo de Snapshot Interativo

Uma Vez Quevocêentra o modo de快照Interativo,jestarápaceo一个passo nos快照com falhas,u dar-lhe a Oportunidade de Revisar o Resultado Que Aleru。

A Partir daquivocêpode Optar Por Atualizar Esse快照OU Pular Para OPróximo:

Uma Vez Terminado,JestIráfornecer-lhe Um Resumo Antes de Retornar Para O Modo“Watch”:

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

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

例子:

primeiro,vocêescreveymiste,chamando.tomatchinlinesnapshot()SEM ARJIGSOS:

'renderiza corretamee' => {
const = 渲染器
创造 < 关联 = https://prettier.io. > 漂亮 关联 >
托杰森 ;
预计 tomatchinlinesnapshot. ;
} ;

Napróximavezquevocê执行o jest,SeráCalculado,E UM SnapshotSeráEscritoComoMumArgumento Paratomatchinlinesnapshot.

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

étudoquehánisso!VocêPodeAtéMesmoAtualizar OS快照COM- updatesnapshot.ou usando一个山谷没有莫莫- 手表

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

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

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

qualitrvalor dado quenãocombinaseráverificadoexatamente e salvo没有快照:

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

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

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

2.测试应该是确定性的钟que USAdate.now(),o快照gerado a partir deste compoundeeseráfiferentecada vez que o caso detesteéecutado。伊斯特·科索·佩德米斯SimularOmétododate.now()Para Retornar Um Valor AdditeTeTe Toda Vez que otesteéecoputado:

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

Agora,Toda Vez Que O Caso de Teste DeSnapshotéecoputado,date.now()Retornará一致化1482363367071。ISSOSeartsAráNoMesmo快照Sendo Gerado Para Este Componente Indeptendemente de Quando oTesteéEcerutado。

3.使用描述性快照名称
出口 [ ` <用户名/>应该处理一些测试用例 ` ] = ` 无效的 ` ;
出口 [ ` 应该处理一些其他测试用例 ` ] = `
艾伦图灵
` ;

帕拉:

出口 [ ` 应该呈现null ` ] = ` 无效的 ` ;
出口 [ ` 应该是alan图灵 ` ] = `
艾伦图灵
` ;

Como A Paree Partior Descriouse exatamente o que se espera nasaída,ÉmaisCleroVerQuandoEstáertado:

出口 [ ` 应该呈现null ` ] = `
艾伦图灵
` ;
出口 [ ` 应该是alan图灵 ` ] = ` 无效的 ` ;

Perguntas经常满足是否在连续集成(CI)系统上自动写入快照?Arquivos de Snapshot devem ser comitados(inchited,emglês)?teste de snapshotsófunciona com组件作出反应?反应E.原生Sãoumbom caso de Uso para testes de snapshot。没有Entanto,Snapshots Podem Capturar LeyiLar Que Pode Ser Serializado E Devem Serados Semper Que OObjetivoéSeaTarSE ASaídaéCorreta。oRepotioteórioJestClémMuitos审查DeSaídadovópriojestverificaçãoveverificaçãodeverificajest,Bem como mensagens de logdevárias部位do logdigo do Jest。Veja嗯审查desaídacli de spanchotting没有Repotiotório做jest。

QualéAyerençaentre teste de snapshot e teste deregressão视觉?yabo入口博客做了Jest.。

teste de快照替代测试Unitário?Qualéo desempenho do teste de snapshot no que diz respeyo a velocidade e tamanho dos arquivos gerados?Como Eu Resolvo Conmpitos Dentro de Arquivos de Snapshot吗?Ésverívelaplicar osprincípiosde desenvolvimento orientado a testes com teste de snapshot?CoberturadeCódigofucionacom testes de snapshot吗?