大凡做软件开发,肯定会涉及到很多的测试,本地测试,Junit测试,用例测试等,今天就来说说RN的测试。

React Native的官方代码仓库里有一些测试代码,你可以在贡献代码之后回归测试一下,以检测有没有引起别的问题。这些测试是通过Travis持续集成系统来运行的,并且会自动针对你提交的代码给出测试结果。

当然我们的测试不可能有完整的覆盖率(尤其对于复杂的用户交互),所以很多更改也还需要仔细的人工审查。我们期待你能帮助我们提高测试覆盖率,以及提供更多的测试代码或是测试用例。

使用Jest来测试

Jest是在命令行通过node来执行的纯js测试工具。测试代码放置在__tests__目录下。有一些功能我们还没有完成模拟(jest中需要模拟一些接口),因而没有纳入测试,以避免测试不通过和提高测试速度,但我们正在尽最大努力去逐渐补完这些功能的模拟。你可以在react-native源代码的根目录中使用如下命令来运行现有的jest测试代码:

npm test

我们建议你在贡献代码的时候也添加自己的测试代码。你可以参考这个简单的例子getImageSource-test.js

注意:要运行你自己的测试代码,请首先去jest的官网阅读指导文档,然后在package.json中加入jest对象,在其中包含一些预备测试环境的脚本。下面是一个示例:

...
"scripts": {
  ...
  "test": "jest"
},
...
"jest": {
  "scriptPreprocessor": "node_modules/react-native/jestSupport/preprocessor.js",
  "setupEnvScriptFile": "node_modules/react-native/jestSupport/env.js",
  "testPathIgnorePatterns": [
    "/node_modules/",
    "packager/react-packager/src/Activity/"
  ],
  "testFileExtensions": [
    "js"
  ],
  "unmockedModulePathPatterns": [
    "promise",
    "source-map"
  ]
},
...

注意:你可能需要先在当前的环境中安装、更新或是链接Node.js和其他的一些工具,不然测试可能无法正常运行。点这里查看最新的测试配置文件.travis.yml

单元测试 (Android)

React Native使用Buck编译工具来运行测试。 单元测试部分直接在本地运行,不需要模拟器。运行下面的命令来执行这些测试:

$ cd react-native
$ ./scripts/run-android-local-unit-tests.sh

集成测试 (Android)

React Native使用Buck编译工具来运行测试。 集成测试需要在模拟器/真机上运行,以验证模块、组件以及React Native的内核部分(比如bridge)在端对端测试中运作正常。

确保你正确安装和配置了Android NDK,具体配置参见这篇文档,然后运行下面的命令来执行测试:

$ cd react-native
$ npm install
$ ./scripts/run-android-local-integration-tests.sh

集成测试 (iOS)

React Native提供了一些工具来简化跨原生与JS端的组件的集成测试。这套工具的两个主要部分是RCTTestRunnerRCTTestModuleRCTTestRunner预设了ReactNative的环境,并且可以以XCTestCase的形式在Xcode中直接运行测试 (最简单的方法就是使用runTest:module)。而RCTTestModule则是以 NativeModules.TestModule对象导出到了JS环境中。测试代码需要以JS写成的,并且必须在测试完成后调用TestModule.markTestCompleted()方法,否则测试过程会超时并且失败。失败的表现一般是抛出一个JS异常。测试错误条件也是可行的,使用runTest:module:initialProps:expectErrorRegex:或是runTest:module:initialProps:expectErrorBlock:方法,它们会按提供的条件去验证抛出的错误是否符合。你可以参考IntegrationTestHarnessTest.jsIntegrationTests.m以及IntegrationTestsApp.js来看具体怎么做集成测试。

Xcode中运行IntegrationTest和UIExplorer两个官方示例应用时,可以按下cmd + U键来直接在本地运行集成测试。

快照测试 (iOS)

快照测试是集成测试的一种常见类型。这类测试首先渲染一个组件,然后使用TestModule.verifySnapshot()比对屏幕截图与参考效果图,其原理是利用了FBSnapshotTestCase这个库。参考效果图是通过在RCTTestRunner中设置recordMode = YES,然后在运行测试时录制的。屏幕截图在32位和64位色深以及不同的操作系统版本上可能会有细微的差别,所以建议强制在指定的配置环境中执行测试。此外我们还强烈建议所有的网络数据和其他的潜在依赖项都应该事先模拟。你可以参考SimpleSnapshotTest这个例子。

如果你提交的PR(Pull Request,即提交你贡献的代码,并请求官方人员合并到仓库中)会影响到快照测试,比如给现有的快照测试添加一个新的测试用例,那么首先需要重新录制参考效果图。只需在UIExplorer/UIExplorerSnapshotTests.m中设置_runner.recordMode = YES;,然后重新运行先前失败的测试代码,再之后将这一设置改回去,最后提交/更新你的PR,看Travis的自动测试能否通过。

React Native自动化测试的更多相关文章

  1. React Native移动框架功能研究

    React Native移动框架功能研究 此篇只研究React Native框架的功能. 一.React Natvie是什么 React Native是使用React(或者说JS)来开发原生APP的框 ...

  2. 腾讯优测优分享 | 探索react native首屏渲染最佳实践

    腾讯优测是专业的移动云测试平台,旗下的优分享不定时提供大量移动研发及测试相关的干货~ 此文主要与以下内容相关,希望对大家有帮助. react native给了我们使用javascript开发原生app ...

  3. React Native学习方法论

    这是我技术公众号的第一篇文章,也是React Native系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学 ...

  4. beeshell —— 开源的 React Native 组件库

    介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...

  5. React Native 之 Text的使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  6. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

  7. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  8. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  9. React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

随机推荐

  1. ●BZOJ 4821 [Sdoi2017]相关分析

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=4821 题解: 线段树是真的恶心,(也许是我的方法麻烦了一些吧)首先那个式子可以做如下化简: ...

  2. bzoj 4008: [HNOI2015]亚瑟王

    Description 小 K 不慎被 LL 邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑. 他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂 亮.众所周知,亚瑟王是一 ...

  3. Linux 脚本为什么会有#!

    我们在Linux系统终端编辑脚本时第一行通常这么写: #!/usr/bin/env python3 为什么要写这一行,起什么作用? 我们先看看不写这一行会出现什么?那么就会报下面的错误. #!/usr ...

  4. PHP开发中Redis安装(CentOS6.5)

    1.安装Redis 1 wget http://download.redis.io/releases/redis-3.2.8.tar.gz 2 tar xzf redis-3.2.8.tar.gz 3 ...

  5. Printer for Me

    今天,良心系部终于给我配了打印机^^. 办公室门外还挂了牌子.

  6. Python处理正则表达式超时的办法

    最近在项目中遇到一个问题,就是需要采用正则匹配一些疑似暗链和挂马的HTML代码,而公司的老大给的正则表达式有的地方写的不够严谨,导致在匹配的时候发生卡死的现象,而后面的逻辑自然无法执行了.虽然用正则表 ...

  7. redis的基本数据类型

    一:redis是一个开源的,使用C语言编写,支持网络,可基于内存亦可持久化的日志型,key-value方式存储的nosql数据库.作为缓存服务器,速度效率都很快,和memcache相似 redis支持 ...

  8. 04_Struts2标签

    1.通用标签: property标签: 用来输出值栈属性的值 如果value属性没有给出,ValueStack值栈栈顶对象的值被输出 许多情况下,EL表达式可以提供更简洁的语法 url标签: url方 ...

  9. android JNI的.so库调用

    在一篇博客中看到一篇文章,感觉描述的还可以: 在前面的博客中介绍的都是使用java开发Android应用,这篇博客将介绍java通过使用jni调用c语言做开发 为了更加形象的介绍jni,先观察下面的图 ...

  10. ejabberd开发和部署

    ejabberd开发和部署 (金庆的专栏 2016.10) 搭建了自己的ejabberd集群,然后少量更改源码,实现定制的XMPP服务器. 从github fork ejabberd 库,定为 mas ...