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

Testando应用反应

没有Facebook,USAMOS jest para testar aplicativos<一个HREF.=“https://reactjs.org/" target="_blank" rel="noopener noreferrer">反应

Instalacao<一个班级=“hash-link" href="#instalação" title="#“>#

Instalação com创建React App<一个班级=“hash-link" href="#instalação-com-create-react-app" title="#“>#

SevocêéGovo没有反应,Refomendamos que使用<一个HREF.=“https://create-react-app.dev/" target="_blank" rel="noopener noreferrer">创建React App.。estáprontopara uso e<一个HREF.=“https://create-react-app.dev/docs/running-tests/" target="_blank" rel="noopener noreferrer">JáVEMCom Jest!!VocêSóPrecisaAdicionar O Cacote反应测试渲染器Para译者快照。

执行

添加 --dev反应测试渲染器

Instalação sem创建React App<一个班级=“hash-link" href="#instalação-sem-create-react-app" title="#“>#

Sevocê脚踏Umaaplicaçãoinstente vai precisar instalar alguns pacotes para que tudo funcione bem junto。estamos usondo o accoteBabel-Jest.e o预设反应Babel Para TransformarNossoCódigodentrodo Ambiente de Teste。咨询Também.<一个HREF.=“/pt-BR/docs/getting-started">乌斯达巴贝尔

执行

添加 --dev jest babel-jest @ babel / preset-eng @ babel / precet-rest-test-renseter

SEU.package.json.Deve Parecer Algo Como Isto(onde<当前版本>éonúmerodaVersãoMais最近是Para O Pacote)。POR偏爱,Adicione作为Entradas脚本e deconfiguraçãojest:

// package.json.
“依赖” {
“反应” “<当前版本>”
“反应 - DOM” “<当前版本>”
}
“devDependencies” {
“Babel / Preset-Env” “<当前版本>”
“Babel / Prepet-React” “<当前版本>”
“babel-jest” “<当前版本>”
“开玩笑” “<当前版本>”
“反应 - 测试渲染器” “<当前版本>”
}
“脚本” {
“测试” “开玩笑”
}
// babel.config.js.
模块 出口 = {
预设 [ “@babel / preset-env” “@babel / preset-react” ]
} ;

E você está立即para ir!

teste de snapshot.<一个班级=“hash-link" href="#teste-de-snapshot" title="#“>#

vamos criar um.<一个HREF.=“/pt-BR/docs/snapshot-testing">teste de snapshot.Para UM Componente Chamado Link Que Renderiza HiperLinks:

// link.reacect.js.
进口 反应 “反应” ;
const 状态 = {
徘徊 '徘徊'
正常的 '普通的'
} ;
出口 默认 班级 关联 延伸 反应 成分 {
构造函数 道具 {
超级 道具 ;
_onmouseEnter. = _onmouseEnter. 捆绑 ;
_onmouseleave. = _onmouseleave. 捆绑 ;
状态 = {
班级 状态 正常的
} ;
}
_onmouseEnter. {
setstate. { 班级 状态 徘徊 } ;
}
_onmouseleave. {
setstate. { 班级 状态 正常的 } ;
}
渲染 {
返回
< 一种
类名称 = { 状态 班级 }
HREF. = { 道具 || '#' }
onMouseEnter = { _onmouseEnter. }
onmouseleave. = { _onmouseleave. }
>
{ 道具 孩子们 }
一种 >
;
}
}

Agora Vamos USAR o Renderer de Teste做出反应e o Recurse De Snapshot Do Jest Para Interagir Com O Compactiar e Capturar ASaídarenderizada e Criar UM Arquivo de Snapshot:

/ / Link.react.test.js
进口 反应 “反应” ;
进口 渲染器 “react-test-renderer” ;
进口 关联 “. . / Link.react” ;
测试 '链接在悬停时更改类' = > {
const 成分 = 渲染器 创建
< 关联 = http://www.facebook.com. > 脸谱网 关联 >
;
= 成分 toJSON ;
预计 tomatchsnapshot. ;
//手动触发回调
道具 onMouseEnter ;
//重新渲染
= 成分 toJSON ;
预计 tomatchsnapshot. ;
//手动触发回调
道具 onmouseleave. ;
//重新渲染
= 成分 toJSON ;
预计 tomatchsnapshot. ;
} ;

当您运行纱线测试笑话,这将产生如下输出文件:

// __tests __ / __快照__ / link.rehect.test.js.snap
出口 [ ` 链接在悬停1时更改类 ` ] = `
<一个
classname =“正常”
href =“http://www.facebook.com”
onMouseEnter ={[功能]}
onMouseLeave ={[功能]}>
脸谱网
` ;
出口 [ ` 链接在悬停2时更改类 ` ] = `
<一个
classname =“徘徊”
href =“http://www.facebook.com”
onMouseEnter ={[功能]}
onMouseLeave ={[功能]}>
脸谱网
` ;
出口 [ ` 链接在悬停3时更改类 ` ] = `
<一个
classname =“正常”
href =“http://www.facebook.com”
onMouseEnter ={[功能]}
onMouseLeave ={[功能]}>
脸谱网
` ;

这个网址是você executar os testes, saída renderizada será comparada ao snapshot criado anteriormente。快照应该与代码更改一起提交。完整的记录,você precisa inspeciar se é uma mudança假装ou não intention。Se a mudança é esperada, você pode invocar Jest comjest - u快照是存在的。

ocódigopraessememedoestáimenonívelem<一个HREF.=“https://github.com/facebook/jest/tree/master/examples/snapshot" target="_blank" rel="noopener noreferrer">例子/快照

Teste de Snapshot Com Mocks,酶E反应16<一个班级=“hash-link" href="#teste-de-snapshot-com-mocks-enzyme-e-react-16" title="#“>#

使用酶并反应16+时,在快照测试周围有一个警告。如果您使用以下样式模拟模块:

笑话 模拟 '../somedirectory/somecomponent' = > “SomeComponent” ;

然后你会在控制台中看到警告:

警告: < 单一的组分/ > 使用大写HTML。始终使用小写HTML标记 反应。
警告:标签在此浏览器中无法识别。如果你想呈现一个React组件,请以大写字母开始它的名称。

由于如何检查元素类型,因此反应16触发这些警告,并且模拟模块失败了这些检查。您的选择是:

  1. 呈现为文本。这样你就不会看到道具传递给快照中的模拟组件,但它很简单:js jest.mock('./ someComponent',()=>()=>'somecomponent');
    笑话 模拟 ”。/ SomeComponent ' = > = > “SomeComponent” ;
  2. 作为自定义元素呈现。DOM“自定义元素”不会进行任何检查,也不应该引发警告。它们是小写的,名称中有破折号。
    tsx
    笑话 模拟 ”。/部件 = & # 062; = & # 062; < mock-widget /> ;
  3. 使用反应测试渲染器。测试渲染器不关心元素类型,并令人愉快地接受例如。单一组分。您可以使用测试渲染器检查快照,并使用Enzyme单独检查组件行为。
  4. 禁用全部警告(应在您的Jest Setup文件中完成):
    笑话 模拟 “fbjs / lib /警告” = > 要求 'fbjs / lib / liftfunction' ;
    一起禁用警告(应该在你的jest设置文件中完成):mock('fbjs/lib/warning', () => require('fbjs/lib/emptyFunction'));这通常不应该是您的选择,因为有用的警告可能会丢失。然而,在某些情况下,例如在测试react-native组件时,我们会将react-native标记呈现到DOM中,而许多警告是无关的。另一个选择是混合控制台。警告和抑制特定的警告。

o DOM Testando<一个班级=“hash-link" href="#testando-o-dom" title="#“>#

如果您想要断言,并操作您可以使用的呈现组件<一个HREF.=“https://github.com/kentcdodds/react-testing-library" target="_blank" rel="noopener noreferrer">反应测试 - 库那<一个HREF.=“http://airbnb.io/enzyme/" target="_blank" rel="noopener noreferrer">酶,或反应的<一个HREF.=“https://reactjs.org/docs/test-utils.html" target="_blank" rel="noopener noreferrer">TestUtils。以下两种实例使用反应测试库和酶。

反应测试 - 库<一个班级=“hash-link" href="#react-testing-library" title="#“>#

你必须跑YARN ADD - DEV @测试 - 库/反应使用反应测试库。

让我们实现一个复选框,在两个标签之间交换:

/ / CheckboxWithLabel.js
进口 反应 “反应” ;
出口 默认 班级 checkboxwithlabel. 延伸 反应 成分 {
构造函数 道具 {
超级 道具 ;
状态 = { ischecked. 错误的 } ;
//手动绑定,因为反应类组件不会自动绑定
/ / https://reactjs.orgyabo入口/blog/2015/01/27/react v0.13.0 -β- 1. # autobinding html
onChange = onChange 捆绑 ;
}
onChange {
setstate. { ischecked. !! 状态 ischecked. } ;
}
渲染 {
返回
< 标签 >
< 输入
类型 = 复选框
检查 = { 状态 ischecked. }
onChange = { onChange }
/>
{ 状态 ischecked. 道具 labelOn 道具 Labeoff. }
标签 >
;
}
}
/ / __tests__ / CheckboxWithLabel-test.js
进口 反应 “反应” ;
进口 { 清理 fireEvent 渲染 } '@测试 - 库/反应' ;
进口 checkboxwithlabel. '../checkboxwithlabel' ;
//注意:在@测试库/ React @ 9.0.0或更高版本中自动为您自动完成清理后续
//卸载测试完成后卸载和清除DOM。
afterEach 清理 ;
“checkboxwithlabel单击”后面更改文本 = > {
const { QueryBylabeltext. GetBylabeltext. } = 渲染
< checkboxwithlabel. labelOn = Labeoff. = />
;
预计 QueryBylabeltext. / / 一世 Tobeththy. ;
fireEvent 点击 GetBylabeltext. / / 一世 ;
预计 QueryBylabeltext. / / 一世 Tobeththy. ;
} ;

此示例的代码可在以下网站获得<一个HREF.=“https://github.com/facebook/jest/tree/master/examples/react-testing-library" target="_blank" rel="noopener noreferrer">例子/反应测试 - 库

酶<一个班级=“hash-link" href="#enzyme" title="#“>#

你必须跑纱线添加——dev酶使用酶。如果您使用的是15.5.0以下的React版本,还需要安装反应 - Addons-Test-Utils

让我们用Enzyme而不是反应测试库来重写上面的测试。号usamos o<一个HREF.=“http://airbnb.io/enzyme/docs/api/shallow.html" target="_blank" rel="noopener noreferrer">renderizador肤浅酵素巢进行审查。

/ / __tests__ / CheckboxWithLabel-test.js
进口 反应 “反应” ;
进口 { } '酶' ;
进口 checkboxwithlabel. '../checkboxwithlabel' ;
测试 “checkboxwithlabel单击”后面更改文本 = > {
//渲染文档中标签的复选框
const 复选框 = < checkboxwithlabel. labelOn = Labeoff. = /> ;
预计 复选框 文本 toequal. '离开' ;
复选框 找到 '输入' 模拟 '改变' ;
预计 复选框 文本 toequal. '上' ;
} ;

此示例的代码可在以下网站获得<一个HREF.=“https://github.com/facebook/jest/tree/master/examples/enzyme" target="_blank" rel="noopener noreferrer">实施例/酶

变换区域Personalizados.<一个班级=“hash-link" href="#transformadores-personalizados" title="#“>#

如果您需要更高级的功能,您也可以构建自己的转换器。而不是使用Babel-Jest.,这是一个使用的例子@babel /核心

//自定义 - 变换器.JS
'使用strict' ;
const { 变换 } = 要求 “@babel /核心” ;
const jestpreset. = 要求 'babel-preset-jest' ;
模块 出口 = {
过程 src 文件名 {
const 结果 = 变换 src {
文件名
预设 [ jestpreset. ]
} ;
返回 结果 || src ;
}
} ;

别忘了安装@babel /核心BABEL-PREMET-JEST这个示例的包可以工作。

Para Fazer Isto Funcionar Com JestVocêPrecisaAtualizar SuaConfiguraçãoJestCom Isso:“变换”:{“\\。js $”:“path / to / custom-transformer.js”}

如果您想使用Babel支持构建变压器,您也可以使用Babel-Jest.要在自定义配置选项中撰写一个并传递:

const Babeljest. = 要求 “babel-jest” ;
模块 出口 = Babeljest. createTransformer {
预设 [ '我的定制预设' ]
} ;