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

Testarea aplicațiilor反应

在Facebook,我们使用Jest进行测试<一个href=”https://reactjs.org/" target="_blank" rel="noopener noreferrer">反应应用程序。

Instalare<一个class="hash-link" href="#instalare" title="#”>#

安装cu创建React App<一个class="hash-link" href="#instalare-cu-create-react-app" title="#”>#

如果你是React的新手,我们推荐你使用<一个href=”https://create-react-app.dev/" target="_blank" rel="noopener noreferrer">创建应用程序反应。我们的网址是şi Este<一个href=”https://create-react-app.dev/docs/running-tests/" target="_blank" rel="noopener noreferrer">livrat铜开玩笑!您只需要添加即可react-test-renderer呈现快照。

Rulare

添加 - - - dev react-test-renderer

安装fără创建React应用程序<一个class="hash-link" href="#instalare-fără-create-react-app" title="#”>#

Dacă aveţi o aplicaţie existentă trebuie să instalaţi câteva pachete pentru a face totul să funcționeze bine împreună。有陈列folosim pachetulbabel-jestş我presetarea巴别塔反应这是一个转换的代码în中间测试。De asemenea咨询ţ我<一个href=”//www.ieatrice.com/ro/docs/getting-started">utilizarea巴别塔。

Rulare

添加 ——dev jest babel-jest @babel/preset-env @babel/preset-react -test-renderer

Fișierulpackage.jsonAr trebui să arate în felul următor (unde<当前版本>Este numărul real al celi mai recente versiuni pentru pachetul分别)。Vă rugăm să adăugaţi script-uri şi configurările pentru jest:

“依赖” : {
“反应” : “<当前版本>” ,
“react-dom” : “<当前版本>”
} ,
“devDependencies” : {
“@babel / preset-env” : “<当前版本>” ,
“@babel / preset-react” : “<当前版本>” ,
“babel-jest” : “<当前版本>” ,
“开玩笑” : “<当前版本>” ,
“react-test-renderer” : “<当前版本>”
} ,
“脚本” : {
“测试” : “开玩笑”
}
/ / babel.config.js
模块 出口 = {
预设 : ( “@babel / preset-env” , “@babel / preset-react” ] ,
} ;

Și sunteți gata de drum!

Testarea de想象<一个class="hash-link" href="#testarea-de-imagine" title="#”>#

Haideți să creăm un<一个href=”//www.ieatrice.com/ro/docs/snapshot-testing">测试de想象pentru o componentă Link care randează hyperlink-uri:

/ / Link.react.js
进口 反应 , { useState } “反应” ;
常量 状态 = {
徘徊 : “徘徊” ,
正常的 : “正常” ,
} ;
常量 链接 = ( { 页面 , 孩子们 } ) = > {
常量 ( 状态 , setStatus ] = useState ( 状态 正常的 ) ;
常量 onMouseEnter = ( ) = > {
setStatus ( 状态 徘徊 ) ;
} ;
常量 onMouseLeave = ( ) = > {
setStatus ( 状态 正常的 ) ;
} ;
返回 (
< 一个
类名称 = { 状态 }
href = { 页面 || “#” }
onMouseEnter = { onMouseEnter }
onMouseLeave = { onMouseLeave }
>
{ 孩子们 }
一个 >
) ;
} ;
出口 默认的 链接 ;

注意:示例使用的是函数组件,但是类组件可以用同样的方式进行测试。看到<一个href=”https://reactjs.org/docs/components-and-props.html" target="_blank" rel="noopener noreferrer">React:函数和类组件。提醒对于Class组件,我们希望Jest用于测试道具,而不是直接测试方法。

Acum haideţi să utilizăm procesorul de randare React şi funcționalitatea din Jest pentru testarea de imagine pentru a interacţiona cu componenta şi a captura rezultatul şi a crea un fişier de imagine:

/ / Link.react.test.js
进口 反应 “反应” ;
进口 渲染器 “react-test-renderer” ;
进口 链接 “. . / Link.react” ;
测试 ( '在悬停时链接改变类' , ( ) = > {
常量 组件 = 渲染器 创建 (
< 链接 页面 = http://www.facebook.com > 脸谱网 链接 > ,
) ;
= 组件 toJSON ( ) ;
预计 ( ) toMatchSnapshot ( ) ;
//手动触发回调
道具 onMouseEnter ( ) ;
/ /重新呈现
= 组件 toJSON ( ) ;
预计 ( ) toMatchSnapshot ( ) ;
//手动触发回调
道具 onMouseLeave ( ) ;
/ /重新呈现
= 组件 toJSON ( ) ;
预计 ( ) toMatchSnapshot ( ) ;
} ) ;

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

/ / __tests__ / __snapshots__ / Link.react.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 ={[功能]}>
脸谱网
< / >
;

数据为când executaţi睾丸,并与想象的比较creată前。快照应该与代码更改一起提交。Atunci când un test de imagine eșuează, trebuie să inspectați dacă este vorba de o modificare intenționată sau neintenţionată。În cazul în care schimbala este intenționată se poate apela Jest cujest - uPentru是一个至高无上的想象existentă。

此示例的代码可在以下网站获得<一个href=”https://github.com/facebook/jest/tree/master/examples/snapshot" target="_blank" rel="noopener noreferrer">例子/快照。

快照测试与模拟,酶和反应16<一个class="hash-link" href="#snapshot-testing-with-mocks-enzyme-and-react-16" title="#”>#

当使用Enzyme和React 16+时,快照测试有一个警告。如果你使用以下样式模拟一个模块:

开玩笑 模拟 ( “. . / SomeDirectory / SomeComponent” , ( ) = > “SomeComponent” ) ;

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

警告: < SomeComponent / > 使用大写HTML。总是使用小写的HTML标记 反应。
#或:
警告:标签 < SomeComponent > 无法识别 这个浏览器。如果你想呈现一个React组件,请以大写字母开始它的名称。

React 16会根据其检查元素类型的方式触发这些警告,mock模块无法通过这些检查。你的选择是:

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

Testarea DOM<一个class="hash-link" href="#testarea-dom" title="#”>#

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

react-testing-library<一个class="hash-link" href="#react-testing-library" title="#”>#

你必须跑——dev @test -library/react使用react-testing-library。

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

/ / CheckboxWithLabel.js
进口 反应 , { useState } “反应” ;
常量 CheckboxWithLabel = ( { labelOn , labelOff } ) = > {
常量 ( 完成 , setIsChecked ] = useState ( ) ;
常量 onChange = ( ) = > {
setIsChecked ( ! 完成 ) ;
} ;
返回 (
< 标签 >
< 输入 类型 = 复选框 检查 = { 完成 } onChange = { onChange } />
{ 完成 吗? labelOn : labelOff }
标签 >
) ;
} ;
出口 默认的 CheckboxWithLabel ;
/ / __tests__ / CheckboxWithLabel-test.js
进口 反应 “反应” ;
进口 { 清理 , fireEvent , 渲染 } “@testing-library /反应” ;
进口 CheckboxWithLabel “. . / CheckboxWithLabel” ;
//注意:在@testing-library/react@9.0.0或更高版本中,运行cleanup afterEach会自动为你完成
//在测试完成后卸载和清理DOM。
afterEach ( 清理 ) ;
( 'CheckboxWithLabel会在点击后改变文本' , ( ) = > {
常量 { queryByLabelText , getByLabelText } = 渲染 (
< CheckboxWithLabel labelOn = labelOff = /> ,
) ;
预计 ( queryByLabelText ( / / ) ) toBeTruthy ( ) ;
fireEvent 点击 ( getByLabelText ( / / ) ) ;
预计 ( queryByLabelText ( / / ) ) toBeTruthy ( ) ;
} ) ;

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

酶<一个class="hash-link" href="#enzyme" title="#”>#

你必须跑纱线添加——dev酶使用酶。如果使用15.5.0以下的React版本,还需要安装react-addons-test-utils

让我们用Enzyme而不是反应测试库来重写上面的测试。În我们遵循的最典型的例子<一个href=”http://airbnb.io/enzyme/docs/api/shallow.html" target="_blank" rel="noopener noreferrer">渲染器表面喧嚣酶。

/ / __tests__ / CheckboxWithLabel-test.js
进口 反应 “反应” ;
进口 { } “酶” ;
进口 CheckboxWithLabel “. . / CheckboxWithLabel” ;
测试 ( 'CheckboxWithLabel会在点击后改变文本' , ( ) = > {
//在文档中呈现一个带有标签的复选框
常量 复选框 = ( < CheckboxWithLabel labelOn = labelOff = /> ) ;
预计 ( 复选框 文本 ( ) ) toEqual ( “关闭” ) ;
复选框 找到 ( “输入” ) 模拟 ( “改变” ) ;
预计 ( 复选框 文本 ( ) ) toEqual ( “上” ) ;
} ) ;

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

Transformatoare personalizate<一个class="hash-link" href="#transformatoare-personalizate" title="#”>#

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

/ / custom-transformer.js
使用严格的 ;
常量 { 变换 } = 需要 ( “@babel /核心” ) ;
常量 jestPreset = 需要 ( “babel-preset-jest” ) ;
模块 出口 = {
过程 ( src , 文件名 ) {
常量 结果 = 变换 ( src , {
文件名 ,
预设 : ( jestPreset ] ,
} ) ;
返回 结果 || src ;
} ,
} ;

不要忘记安装@babel /核心babel-preset-jest这个示例的包可以工作。

Pentru a face acest lucru cu Jest trebuie să actualizați configurația Jest cu:“转换”:{“美元\ \ . js”:“calea / catre / transformatorul-personalizat.js”}

如果您想构建一个具有babel支持的变压器,您也可以使用babel-jest要组合一个并传入你的自定义配置选项:

常量 babelJest = 需要 ( “babel-jest” ) ;
模块 出口 = babelJest createTransformer ( {
预设 : ( “my-custom-preset” ] ,
} ) ;