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

Тесування React Native додатків

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

通过阅读以下系列文章,你将更深入地了解如何测试一个有效的React原生应用示例:<一个href="https://callstack.com/blog/testing-react-native-with-the-new-jest-part-1-snapshots-come-into-play/" target="_blank" rel="noopener noreferrer">第1部分:Jest - Snapshot开始发挥作用和<一个href="https://callstack.com/blog/testing-react-native-with-the-new-jest-part-2-redux-snapshots-for-your-actions-and-reducers/" target="_blank" rel="noopener noreferrer">第2部分:笑话-为你的动作和减少器还原快照

Налаштування<一个类="hash-link" href="#налаштування" title="#">#

从react-native版本0.38开始,在运行时默认包含Jest设置反应本机初始。下面的配置应该自动添加到您的包中。json文件:

{
“脚本” : {
“测试” : “笑话”
} ,
“笑话” : {
“预设” : “react-native”
}
}

注意:如果您正在升级您的react-native应用程序,并且之前使用过jest-react-native预设,从您的package.json将预设值更改为react-native代替。

运行纱线测试用jest运行测试。

快照测试<一个类="hash-link" href="#snapshot-test" title="#">#

让我们创建一个<一个href="/uk/docs/snapshot-testing">快照测试对于具有几个视图和文本组件以及某些样式的小型介绍组件:

/ / Intro.js
进口 反应 , { 组件 } “反应” ;
进口 { 样式表 , 文本 , 视图 } “react-native” ;
介绍 扩展 组件 {
使成为 ( ) {
返回 (
< 视图 风格 = { 风格 容器 } >
< 文本 风格 = { 风格 欢迎 } > 欢迎 反应 本地的 ! 文本 >
< 文本 风格 = { 风格 指令 } >
一个 反应 本地的 快照测试
文本 >
视图 >
) ;
}
}
常量 风格 = 样式表 创造 ( {
容器 : {
alignItems : “中心” ,
写成backgroundColor : “# F5FCFF” ,
柔性 : 1 ,
justifyContent : “中心” ,
} ,
指令 : {
颜色 : # 333333的 ,
Marginbottom. : 5 ,
textalign. : “中心” ,
} ,
欢迎 : {
字形大小 : 20. ,
保证金 : 10 ,
textalign. : “中心” ,
} ,
} ) ;
出口 默认的 介绍 ;

Тепердавайтевикористаємотестовийрендерер阵营іфункціюствореннязнімків玩笑длявзаємодіїзкомпонентом,отриманнярезультатуйоговідображенняістворенняфайлазнімку:

/ / __tests__ / Intro-test.js
进口 反应 “反应” ;
进口 渲染器 '反应测试渲染器' ;
进口 介绍 “. . /介绍” ;
测试 ( 显示正确的 , ( ) => {
常量 = 渲染器 创造 ( < 介绍 /> ) 托杰森 ( ) ;
预计 ( ) toMatchSnapshot ( ) ;
} ) ;

当你运行时纱线测试或者开玩笑,将生成如下输出文件:

// ___tests __ / __快照__ / intro-test.js.snap
出口 ( 介绍正确渲染1 ] =
<视图
风格= {
对象{
“alignItems”:“中心”,
“写成backgroundColor”:“# F5FCFF”,
“弯曲”:1、
“justifycontent”:“中心”,
}
}>
<文本
风格= {
对象{
“字形大小”:20,
“保证金”:10
“textAlign”:“中心”,
}
}>
欢迎反应本地人!
< /文本>
<文本
风格= {
对象{
“颜色”:“333333 #”,
“marginBottom”:5
“textAlign”:“中心”,
}
}>
这是一个React原生快照测试。
< /文本>
< /视图>
;

Наступногоразу,Підчасзапускутестів,РезультатРоботиКомпонентаБудепорівнянийЗізбереженимЗнімком。快照应与代码更改一起提交。КолиТест,щовикористовуюзнімки,провалиться,ВамПотрібноБудеПеревіритичиВідбулисянавмисні,чиненавмиснізміни。кщозмінибулиочікувані,виможетезапуститиjestКомандоюjest -u., щоб оновити існуючі знімки。

这个例子的代码可以在下面找到<一个href="https://github.com/facebook/jest/tree/master/examples/react-native" target="_blank" rel="noopener noreferrer">例子/ react-native

预设配置<一个类="hash-link" href="#preset-configuration" title="#">#

预设设置了环境,非常武断,基于我们在Facebook上发现的有用的东西。所有的配置选项都可以被覆盖,就像在没有使用预设时可以自定义一样。

Середовище<一个类="hash-link" href="#середовище" title="#">#

react-native船上有jest preset,所以jest.preset你的领域package.json应该指出,react-native。预设是模拟React Native应用程序的环境的节点环境。因为它没有加载任何DOM或浏览器API,因此它大大提高了Jest的启动时间。

转换ageerPatterns定制<一个类="hash-link" href="#transformignorepatterns-customization" title="#">#

的<一个href="/uk/docs/configuration">transformIgnorePatterns选项可以用来指定哪些文件应该被Babel转换。不幸的是,许多react-native npm模块在发布之前并不预编译它们的源代码。

默认情况下,jest-react-native预设只处理项目自己的源文件和react-native。如果你有需要转换的npm依赖项,你可以通过包括react-native之外的模块来自定义这个配置选项:

{
“transformIgnorePatterns” : (
“node_modules / (? ! (react-native |我的项目| react-native-button) /)”
]
}

setupFiles<一个类="hash-link" href="#setupfiles" title="#">#

如果您想为每个测试文件提供额外的配置,则<一个href="/uk/docs/configuration.html">setupFiles配置选项可以用来指定安装脚本。

modulenamemapper.<一个类="hash-link" href="#modulenamemapper" title="#">#

的<一个href="/uk/docs/configuration">modulenamemapper.可以用于将一个模块路径映射到另一个模块。默认情况下,预设将所有图像映射到一个图像存根模块,但如果找不到某个模块,这个配置选项会有帮助:亚搏取款

{
“moduleNameMapper” : {
“my-module.js” : “< rootDir > /路径/ / my-module.js”
}
}

Поради<一个类="hash-link" href="#поради" title="#">#

使用jest.mock模拟本机模块<一个类="hash-link" href="#mock-native-modules-using-jestmock" title="#">#

内置的Jest预设react-native附带一些默认的模块,它应用于反应机库。但是,某些反应机本地组件或第三方组件依赖于要呈现的本机代码。在这种情况下,Jest的手动嘲笑系统可以帮助嘲笑底层实施。亚搏取款

例如,如果您的代码依赖于第三方的本地视频组件调用react-native-video你可能想要用这样的手动模拟来消除它:

开玩笑 嘲笑 ( '反应机制 - 视频' , ( ) => '视频' ) ;

这将把组件渲染为<视频{…道具}/ >随着Snapshot输出中的所有道具。也可以看看<一个href="/uk/docs/tutorial-react">在酶周围寻找并反应16

有时您需要提供更复杂的手动模拟。例如,如果你想把原生组件的道具类型或静态字段转发给mock,你可以通过jest-react-native中的这个helper从mock中返回一个不同的React组件:亚搏取款

开玩笑 嘲笑 ( “路径/ / MyNativeComponent” , ( ) => {
常量 mockComponent = 需要 ( '反应原生/ jest / mockcomponent' ) ;
返回 mockComponent ( “路径/ / MyNativeComponent” ) ;
} ) ;

或者如果您想创建自己的手动模拟,您可以做到这样的事情:

开玩笑 嘲笑 ( '文本' , ( ) => {
常量 RealComponent = 开玩笑 requireActual ( '文本' ) ;
常量 反应 = 需要 ( “反应” ) ;
文本 扩展 反应 组件 {
使成为 ( ) {
返回 反应 createElement ( '文本' , 道具 , 道具 孩子们 ) ;
}
}
文本 proptype = RealComponent proptype ;
返回 文本 ;
} ) ;

在其他情况下,你可能想要模拟一个不是React组件的本机模块。同样的技巧也可以应用。我们建议检查本机模块的源代码,并在真实设备上运行react本机应用时记录该模块,然后在真实模块之后手动建模。

如果反复模拟相同的模块,建议在单独的文件中定义这些模拟并将其添加到列表中setupFiles