调试与测试

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