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

测试React Native Apps

在Facebook,我们用玩笑来测试<一个href="https://reactnative.dev/" target="_blank" rel="noopener noreferrer">原生应用程序。

通过阅读以下系列来获得更深入的了解测试工作React Native App示例:<一个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 - 快照进入戏剧和<一个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部分:JEST - 用于您的操作和减速器的Redux快照

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

从反应本机版本0.38开始,默认运行时包含Jest Setupreact-native init。应自动添加以下配置.JSON文件:

{
“脚本” {
“测试” “开玩笑”
}
“开玩笑” {
“预设” “反应本地”
}
}

注意:如果要升级React-Native应用程序并以前使用jest-反应原住民预设,从您的依赖下删除依赖package.json.文件并更改预设反应本地反而。

跑步纱线测试用Jest运行测试。

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

让我们创造一个<一个href="/docs/25.x/snapshot-testing">快照测试对于一个带有一些视图和文本组件和一些样式的小的intro组件:

// intro.js.
进口 反应 { 零件 } “反应” ;
进口 { 样式表 文本 看法 } '反应原住民' ;
班级 介绍 延伸 零件 {
渲染 {
返回
< 看法 风格 = { 风格 容器 } >
< 文本 风格 = { 风格 欢迎 } > 欢迎 反应 本国的 !! 文本 >
< 文本 风格 = { 风格 指示 } >
这个 一个 反应 本国的 快照测试
文本 >
看法 >
;
}
}
const 风格 = 样式表 创建 {
容器 {
aligntems. '中央'
背景颜色 '#f5fcff'
flex 1
justifycontent. '中央'
}
指示 {
颜色 '#333333'
marginBottom 5.
textAlign '中央'
}
欢迎 {
字体大小 20.
利润 10.
textAlign '中央'
}
} ;
出口 默认 介绍 ;

现在让我们使用React的测试渲染器和Jest的快照功能与组件交互并捕获渲染的输出并创建快照文件:

// __tests __ / intro-test.js
进口 反应 “反应” ;
进口 渲染器 “react-test-renderer” ;
进口 介绍 '../介绍' ;
测试 '渲染正确' = > {
const = 渲染器 创建 < 介绍 /> toJSON ;
预计 tomatchsnapshot. ;
} ;

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

/ / __tests__ / __snapshots__ / Intro-test.js.snap
出口 [ ` 介绍正确渲染1 ` ] = `
<查看
style = {
目的 {
“alignitems”:“中心”,
“backgroundcolor”:“#f5fcff”,
“Flex”:1,
“justifyContent”:“中心”,
}
}>
style = {
目的 {
“fontsize”:20,
“边缘”:10,
“textalign”:“中心”,
}
}>
欢迎来到React Native!
style = {
目的 {
“颜色”:“#333333”,
“Marginbottom”:5,
“textalign”:“中心”,
}
}>
这是一个原生快照测试的反应。
< /视图>
` ;

下次运行测试时,呈现的输出将与先前创建的快照进行比较。快照应该与代码更改一起提交。当快照测试失败时,您需要检查它是有意更改还是无意更改。如果需要更改,则可以调用Jestjest - u覆盖现有快照。

此示例的代码可用<一个href="https://github.com/facebook/jest/tree/master/examples/react-native" target="_blank" rel="noopener noreferrer">例子/反应原生

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

预设设置了环境,非常自以为是,并根据我们发现在Facebook上有用的内容。所有配置选项都可以覆盖,只要使用任何预设时可以自定义。

环境<一个班级="hash-link" href="#environment" title="#">#

反应本地带着玩笑预设的飞船,所以jest.preset.你的领域package.json.应该指出反应本地。预置是一个节点环境,模拟React原生应用的环境。因为它不加载任何DOM或浏览器api,它大大提高了Jest的启动时间。

transformIgnorePatterns定制<一个班级="hash-link" href="#transformignorepatterns-customization" title="#">#

这<一个href="/docs/25.x/configuration">reganceIgnorePatterns.选项可用于指定Babel转换哪些文件。许多反应本机NPM模块不幸的是,在发布之前不会预先编译他们的源代码。

默认情况下,Jest-React-Native预设仅处理项目自己的源文件并反应本机。如果您有必须转换的NPM依赖项,则可以通过包括除React-Native之外的模块来自定义此配置选项:

{
“转化术级斑点” [
“node_modules /(?(反应本机|我的项目|反应 - 原生按钮)/)”
]
}

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

如果您想为每个测试文件提供其他配置,则<一个href="/docs/25.x/configuration">setupFiles配置选项可用于指定设置脚本。

moduleNameMapper<一个班级="hash-link" href="#modulenamemapper" title="#">#

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

{
“modulenamapper” {
“my-module.js” /path/to/my-module.js”
}
}

提示<一个班级="hash-link" href="#tips" title="#">#

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

内置的jest预设反应本地附带了一些应用于react-native存储库的默认模拟。然而,一些react-native组件或第三方组件依赖于本地代码进行渲染。在这种情况下,Jest的手动模拟系统可以帮助模拟底层实现。亚搏取款

例如,如果您的代码取决于称为第三方本机视频组件反应本机 - 视频您可能希望用这样的手动模拟将其存放出来:

笑话 模拟 “react-native-video” = > “视频” ;

这将使组件呈现为<视频{...道具} />在快照输出中包含它的所有道具。另请参阅<一个href="/docs/25.x/tutorial-react">关于酶和反应的注意事项

有时您需要提供更复杂的手动模拟。例如,如果您希望将本机组件的道具类型或静态字段转发到模拟,则可以通过从Jest-React-Native从Mock返回不同的React组件:亚搏取款

笑话 模拟 '路径/到/ mynativeComponent' = > {
const 模仿 = 要求 “react-native /嘲笑/ mockComponent” ;
返回 模仿 '路径/到/ mynativeComponent' ;
} ;

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

笑话 模拟 “文本” = > {
const Realcomponent. = 笑话 请求 “文本” ;
const 反应 = 要求 “反应” ;
班级 文本 延伸 反应 零件 {
渲染 {
返回 反应 牧马赛 “文本” 这个 道具 这个 道具 孩子们 ;
}
}
文本 概括 = Realcomponent. 概括 ;
返回 文本 ;
} ;

在其他情况下,您可能希望模拟不是反应组件的本机模块。可以应用相同的技术。我们建议在在真实设备上运行React Native应用程序时检查本机模块的源代码和记录模块,然后在实际模块之后建模手动模拟。

如果您最终嘲笑相同的模块,建议在单独的文件中定义这些模型,并将其添加到列表中setupFiles