2.5 React Native代码测试

进行代码调试是提高代码质量的一个重要途径，除此之外，还可以通过代码测试来提高代码的健壮性。常见的代码测试方式有：本地测试、Junit测试、用例测试等。

2.5.1 使用Flow进行类型检查

使用Flow工具进行React Native应用开发不是必须需要掌握的技能，但是掌握了Flow，可以帮助开发者开发出高质量的应用。

Flow是一个静态的类型检查工具，设计之初就是为了可以发现JavaScript脚本里不容易被发现的错误。它依赖类型推断来检查类型错误，甚至可以检测注释代码，利用Flow提供的功能，开发者可以在开发过程中就发现问题从而避免在线上环境出现类似问题。

Flow安装与配置

Flow的安装和配置都比较简单，在项目目录下使用如下命令：

        npm install --save-dev flow-bin

然后我们使用命令运行Flow，系统会为我们自动创建一个．flowconfig文件，它配置了Flow的行为，命令如下：

        flow check

如果读者在项目中没有发现flowconfig文件，也可以手动新建一个． flowconfig文件，然后在．flowconfig文件中添加如下内容：

        .*/node_modules/.*

然后，使用命令再次运行就可以正确地运行程序了。

2.5.2 Jest单元测试

Jest是一款基于Jasmine的单元测试框架，它提供了侵入式的依赖自动模拟功能，也可以很好地与React测试工具进行整合。Jest是系统默认为我们集成的代码测试框架，如果你的项目比较老，需要手动配置，过程如下。

Jest安装与配置

安装命令如下：

        npm install jest-cli -save-dev

然后打开package.json文件，在scripts脚本片段中添加test:

        "scripts": {
            …
            "test": "jest"
          }

在React Native源代码的根目录中使用命令npm test来运行jest测试代码，测试代码会放置在_tests_目录下。默认情况下，系统初始化项目的时候，会在 _tests_文件夹下创建index.ios.js和index.android.js两个测试文件专门用来编写测试配置。

当然也可以自己创建测试文件，关于使用Jest进行Javascript进行测试的更多技术细节，读者可以访问Jest的官网：http://facebook.github.io/jest/。

单元测试（Android）

单元测试直接在本地运行，不需要模拟器，React Native使用Buck编译工具来运行测试用例，使用Buck的命令如下：

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

2.5.3 集成测试

集成测试，又称为组装测试，就是将软件产品中各个模块组装起来，检查其接口是否存在问题，以及组装后的整体功能、性能表现。在开展集成测试之前，往往要先进行深入的单元测试。集成测试（Android）

集成测试运行在模拟器/真机上，以验证模块、组件以及React Native的内核部分（比如bridge）在端对端测试中是否可以正常运作。在集成测试之前，确保正确安装和配置了Android NDK环境。React Native使用Buck编译工具来运行测试，运行命令如下：

        npm install
        ./scripts/run-android-local-integration-tests.sh

集成测试（iOS）

React Native提供了一些工具来简化跨原生与JS端的组件的集成测试，这套工具的两个主要部分是RCTTestRunner与RCTTestModule。RCTTestRunner预设了React Native的环境，并且以XCTestCase的形式在Xcode中直接运行。而RCTTestModule则以NativeModules. TestModule对象导出到JS环境中。测试代码需要以JS写成，且必须在测试完成后调用TestModule.markTestCompleted()方法，否则测试过程会超时并且失败。失败的表现一般是抛出一个JS异常。

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

快照测试（iOS）

快照测试是集成测试的一种常见测试类型，这类测试首先渲染一个组件，然后使用TestModule.verifySnapshot()来比对屏幕截图与参考效果图的差别。参考效果图是通过在RCTTestRunner中设置recordMode = YES，然后在运行测试时录制的。屏幕截图在32位和64位色深以及不同的操作系统版本上可能会有细微的差别，所以建议强制在指定的配置环境中执行快照测试。

在多人合作的项目开发中，如果某人提交到仓库的代码会影响快照测试，为了不影响原有的测试，那么只需在UIExplorer/UIExplorerSnapshotTests.m中设置_runner.recordMode = YES;，然后重新运行先前失败的测试代码即可。