Question

我们创建一个项目，命名为 TestSample：

react-native init TestSample

安装依赖库：react、jest 和 babel-core。

npm install --save-dev react jest-cli babel-core

为了在 React Native 中使用 jest，修改 package.json 文件内容如下：

package.json


{
  "name": "TestSample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node_modules/react-native/packager/packager.sh",
    "test": "jest"
  },
  "dependencies": {

    "react-native": "^0.4.4"
  },
  "devDependencies": {
    "babel-core": "^5.4.7",
    "jest-cli": "^0.4.5",
    "react": "^0.13.3"
  },
  "jshintConfig": {
    "esnext": true,
    "node": true
  },
  "jest": {
    "scriptPreprocessor": "jest-support/preprocessor.js",
    "unmockedModulePathPatterns": [
      "react",
      "babel-core"
    ],
    "testFileExtensions": [
      "js"
    ]
  }
}

为了测试我们的组件，需要将组件代码拆分为独立文件。在这个例子中，TestSample 项目的组件将被移动到 src/index.js 文件中。使用这种方式，我们很容易在测试代码中引入需要测试的组件。

我们的 App 结构如下：

TestSample
    iOS
    jest-support/
        preprocessor.js
    src/
        __tests__
            index-test.js
        __mocks__

            react-native.js
        index.js
    TestSample.xcodeproj
    TestSampleTests
    .flowconfig
    .gitignore
    .npmignore
    index.ios.js
    package.json

preprocessor.js 文件将 ES6 代码转换为 JavaScript 代码，并使用 jest 运行。

jest-support/preprocessor.js



var babel = require('babel-core');

module.exports = {
  process: function (src, filename) {
    if (filename.match(/node_modules/)) {
      return src;
    }

    var result = babel.transform(src, {filename: filename});
    return result.code;
  }
};

让我们模拟出 React Native 组件。当测试程序运行时，React Native 会被模拟，否则将触发 iOS 原生组件。将模拟的 React Native 放进 src 下的 mocks 目录。通过这种方式，当我们从 test 中引入 React Native 时，模拟的 React Native 会被调用。

src/mocks/react-native.js



var React = require('react');

var ReactNative = React;
ReactNative.StyleSheet = {
  create: function(styles) {
    return styles;

  }
};

module.exports = ReactNative;

正如我上面所说，我们需要将组件代码拆分为独立的模块以便测试。

复制 TestSample 组件内容到 src/index.js 文件：

src/index.js



'use strict';

var React = require('react-native');
var {
  StyleSheet,
  Text,
  View,
} = React;

var TestSample = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload, {'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

module.exports = TestSample;

现在 index.ios.js 变得简单了许多，只有一段代码从 src 目录引入 TestSample：

src/index.js



/＊＊
  ＊ Sample React Native App
  ＊ https://github.com/facebook/react-native
  ＊/
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,

  View,
} = React;

var TestSample = require('./src/index');

AppRegistry.registerComponent('TestSample', () => TestSample);