跳到主要内容
版本:下一个

试验性Aplicaciones反应

在Facebook,我们用玩笑来测试<一个HREF.=“https://reactjs.org/" target="_blank" rel="noopener noreferrer">反应应用程序。

设置<一个班级=“hash-link" href="#setup" title="#“>#

设置con创建React应用程序<一个班级=“hash-link" href="#setup-con-create-react-app" title="#“>#

如果你有新的反应,我向你推荐<一个HREF.=“https://create-react-app.dev/" target="_blank" rel="noopener noreferrer">创建React App.。viene ya listo para usar e<一个HREF.=“https://create-react-app.dev/docs/running-tests/" target="_blank" rel="noopener noreferrer">incluye开玩笑!!SOLONECESITARÁSAñadir.反应测试渲染器para renderizarInstantáneas。SOLONECESITARÁSAñadir.反应测试渲染器para renderizarInstantáneas。

ejecutar.

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

设置SIN创建React应用程序<一个班级=“hash-link" href="#setup-sin-create-react-app" title="#“>#

Si Tiene AlgunaAplicaciónSplicación,NecesitaráInstalar Algunos Paquetes Para Hacer Que Todo Trabaje Bien Junto。estamos usando el paqueteBabel-Jest.y反应Babel Propetar Para Transformar NuestroCódigoDentrode El Entorno de Prueba。Recomendamostambiénvea.<一个HREF.=“//www.ieatrice.com/es-ES/docs/next/getting-started">使用Babel.

ejecutar.

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

涂archivo.package.json.se debe ver como algocomoésto(迪迪德<当前版本>最后是versión del paquet)。请帮忙看一下剧本configuración de jest:

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

Y así,……Estás绝望之路!

测试con Instantanea<一个班级=“hash-link" href="#test-con-instantánea" title="#“>#

vamos一个脆弱的联合国<一个HREF.=“//www.ieatrice.com/es-ES/docs/next/snapshot-testing">快照测试Para Un Componente Link QueRenderé联合Univellink:

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

Ahora vamos usar las características render y snapshot de React y Jest para interactuar con los components y capturar lo que renderea, creando un archivo 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 ={[功能]}>
脸谱网
` ;

LaPróximaVezque ejecutes la prueba,Lo que se rendereeseráparamadocon an El Snapshot Previamente Creae。sedeberíaaplicar el快照junto con los cambios decódigo。Cuando Una Prueba Con Snapshot Falla,NecesitaráSpsiveCioncionarSI SE DA POR UN Cambio Intencional O No Intencional。Si El Cambio Es Intencional,Puede Invocar Jest Conjest - uPara sobre escribir en快照是否存在。

ElCódigode Este Ejemero SE Encuentra Displible<一个HREF.=“https://github.com/facebook/jest/tree/master/examples/snapshot" target="_blank" rel="noopener noreferrer">示例/快照

Pruebas de Snapshot Con Simulaciones,酶Y反应16<一个班级=“hash-link" href="#pruebas-de-snapshot-con-simulaciones-enzyme-y-react-16" title="#“>#

干草Una advertencia en torno a las pruebas de snapshot cuando se美国酶y反应16+。Si Simulas联合国Módulousando el estileo siguiente:

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

entoncespodráverdanderenciasen la consola:

警告: < 单一的组分/ > 使用大写HTML。始终使用小写HTML标记 反应。
#或:警告:标签在此浏览器中无法识别。如果你想渲染一个React组件,那么以大写字母开头。

React 16 Dispara Estos Avisos Debido ACómoBortubaLOSTipos de Elementos y ElMódulosimulado falla esas compaciones。tus opciones儿子:

  1. Renderizar科莫texto。De esta manera no verás los props enviados al componente simulado en el snapshot, pero es sencillo: js jest.mock('。/SomeComponent', () => () => 'SomeComponent');
    笑话 模拟 ”。/ SomeComponent ' = > = > “SomeComponent” ;
  2. 作为自定义元素呈现。DOM“自定义元素”没有检查任何东西,也不应该发出警告。它们都是小写的,名字中有一个破折号。
    tsx
    笑话 模拟 ”。/部件 = & # 062; = & # 062; < mock-widget /> ;
  3. 使用反应测试渲染器。测试渲染器不关心元素类型,并令人愉快地接受例如。单一组分。您可以使用test渲染器检查快照,并使用Enzyme单独检查组件行为。
  4. 禁用全部警告(应在您的Jest Setup文件中完成):
    笑话 模拟 “fbjs / lib /警告” = > 要求 'fbjs / lib / liftfunction' ;
    一起禁用警告(应该在jest安装文件中完成):js jest。mock('fbjs/lib/warning', () => require('fbjs/lib/emptyFunction'));这通常不应该是您的选项,因为有用的警告可能会丢失。然而,在某些情况下,例如在测试react-native的组件时,我们将react-native标记呈现到DOM中,许多警告是不相关的。另一种选择是调整控制台。警告和抑制特定的警告。

DOM测试<一个班级=“hash-link" href="#dom-testing" 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

让我们用酶代替react-test -library重写上面的测试。Usaremos酶<一个HREF.=“http://airbnb.io/enzyme/docs/api/shallow.html" target="_blank" rel="noopener noreferrer">浅渲染器在比如。

/ / __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="#transformers-personalizados" title="#“>#

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

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

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

Para Que Esto Funcione Con Jest Necesita Attualizar LaConfiguracióndeJestConésto:“变换”:{“\\。js $”:“path / to / custom-transformer.js”}

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

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

看<一个HREF.=“//www.ieatrice.com/es-ES/docs/next/code-transformation">专用的文档yabo2013为更多的细节。