调试与测试

Debug & Test

Chrome Debugger

在模拟器中使用CMD+D命令可以弹出开发者菜单，从该菜单中可以选择打开 Chrome 或者 Safari 调试器。而在真实的设备中，可以通过摇晃设备来打开开发者菜单。在 Chrome 或者 Safari 中可以查看console.log的记录从而方便调试，正如调试 React Web 一样的效果。不过需要注意的是，如果在频繁的刷新下这种调试会导致应用程序很明显的运行变慢。

Type-Checking with Flow

在安装 React Native 开发环境时官方就推荐了 Flow 作为开发辅助工具，Flow 是一个用于静态类型检查的 JavaScript 的开发库。Flow 依赖于类型推导来检测代码中可能的类型错误，并且允许逐步向现存的项目中添加类型声明。如果需要使用 Flow，只需要用如下的命令：

flow check

一般情况下默认的应用中都会包含一个*.flowconfig文件，用于配置 Flow 的行为。如果不希望 flow 检查全部的文件，可以在.flowconfig*文件中添加配置进行忽略：

[ignore]
.*/node_modules/.*

最终检查的时候就可以直接运行：

$ flow check
$ Found 0 errors.

Testing with Jest

React Native 支持使用 Jest 进行 React 组件的测试，Jest 是一个基于 Jasmine 的单元测试框架，它提供了自动的依赖 Mock，并且与 React 的测试工具协作顺利。

npm install jest-cli --save-dev

可以将 test 脚本加入到 package.son 文件中：

{
  ...
  "scripts": {
    "test": "jest"
   }
   ...
}

直接使用npm test命令直接运行 jest 命令，下面可以创建 tests 文件夹，Jest 会递归搜索 tests 目录中的文件，这些测试文件中的代码如下：

"use strict";

describe("a silly test", function() {
  it("expects true to be true", function() {
    expect(true).toBe(true);
  });
});

而对于一些复杂的应用可以查看 React Native 的官方文档，以其中一个 getImageSource 为例：

**
 * Taken from https://github.com/facebook/react-native/blob/master/Examples/Movies/__tests__/getImageSource-test.js
 */

'use strict';

jest.dontMock('../getImageSource');
var getImageSource = require('../getImageSource');

describe('getImageSource', () => {
  it('returns null for invalid input', () => {
    expect(getImageSource().uri).toBe(null);
  });
  ...
});

因为 Jest 是默认自动 Mock 的，所以需要对待测试的方法设置 dontMock.

Reactotron:Control, monitor, and instrument your React DOM and React Native apps