Question

我正在尝试使用酶来测试我的React Native项目，并遵循设置说明。

https://github.com/airbnb/enzyme/blob/master/docs/guides/react-native.md

  "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "test": "mocha --require react-native-mock/mock.js --compilers js:babel-core/register --recursive test/**/*.js"
  },

这很好，我自己的代码被正确编译，但是当我包含一个不转换代码的模块时（例如https://github.com/aksonov/react-native-router-flux），我的测试拒绝运行，因为它们在这些导入语句中出错模块。

如何让babel转换这些模块，还是有另一种方法让我的测试运行？

更新

似乎非转换的第三方模块与React Native相当普遍，因为React Native本身并没有被转换。

解决方案似乎是强制转换和使用react-native-mock的组合。 https://github.com/facebook/react-native/issues/5392

然而，由于NavigationExperimental没有被嘲笑，我在react-native-router-flux方面遇到了进一步的问题。

相关链接是：

https://github.com/lelandrichardson/react-native-mock/issues/23 https://github.com/lelandrichardson/react-native-mock/issues/22 https://github.com/lelandrichardson/react-native-mock/pull/34

如果我找到解决方案，我会在这里更新。

更新2

我已将下面的当前解决方法包括在内，以防有人发现它有用。

https://stackoverflow.com/a/37655424/168012

Answer 1

您可以尝试创建自己的脚本来调用require挂钩（而且BTW最好使用--compilers js:babel-core/register包）并使用babel-register选项，而不是only|ignore。：

// init.js
require("babel-register")({
  only: [
    "/my-app-dir/src/**/*",
    "/my-app-dir/node_modules/react-native-router-flux/**/*",
  ]
});

mocha --require ./init.js

这通常是一种非常可疑的发布方式的方式。这假设.babelrc与包一起发布。即便如此，因为它引用的内容称为devDependencies，您似乎需要手动进入其文件夹并安装它们。

Answer 2

我目前的解决方案如下（在ReactNativeMock中没有对NavigationExperimental的当前支持）：

package.json

"scripts": {
    ...
    "test": "mocha --require test/init.js --recursive test/**/*.js"
  },

<强> /test/init.js

require('react-native-mock/mock');

require("babel-register")({
    only: [
        "/node_modules/react-native-tab-navigator/*.js",
        "/node_modules/react-native-router-flux/*.js",
        "/node_modules/react-native-router-flux/src/*.js",
        "/node_modules/react-native-tabs/*.js",
        "/node_modules/react-native-button/*.js",
        "/node_modules/react-native-swipeout/*.js",
        "/app/**/*",
        "/test/**/*",
    ]
});

import mockery from 'mockery';
mockery.enable();
mockery.registerMock('react-native-router-flux', {Actions:{}});

Answer 3

这是我的testHelper.js来处理react-native-3th party模块

require('babel-polyfill');
require('react-native-mock/mock');

// require('babel-core/register')({
//   ignore: function(packageName) {
//     if (packageName.match(/node_modules/)) {
//       return !(packageName.match(/react-native-vector-icons/)
//         || packageName.match(/react-native-animatable/)
//         || packageName.match(/react-native-router-flux/)
//         || packageName.match(/react-native-tab-navigator/)
//       );
//     }
//     return false;
//   }
// });

var fs = require('fs');
var path = require('path');

function getBabelRC() {
  var rcpath = path.join(__dirname, '.babelrc');
  var source = fs.readFileSync(rcpath).toString();
  return JSON.parse(source);
}

var config = getBabelRC();

config.ignore = function(filename) {
  if (!(/\/node_modules\//).test(filename)) {
    console.log(filename, 'FALSE');
    return false; // if not in node_modules, we want to compile it
  } else if ((/\/node_modules\/react-native.*\//).test(filename)) {
    // its RN source code, so we want to compile it
    console.log(filename, 'FALSE');
    return false;
  } else {
    console.log(filename, 'TRUE');
    // it's in node modules and NOT RN source code
    return true;
  }
};

require("babel-register")(config);

global.__DEV__ = true;


// var chai = require('chai');
// var dirtyChai = require('dirty-chai');
// chai.use(dirtyChai);

import chai from 'chai';
import dirtyChai from 'dirty-chai';
// import chaiImmutable from 'chai-immutable';

chai.use(dirtyChai);
//chai.use(chaiImmutable);

import mockery from "mockery";

mockery.enable();
mockery.registerMock('./menu_burger.png', 0);

这是我的npm测试

"test": "node_modules/.bin/mocha --compilers js:babel-core/register --require testHelper.js **/__test__/*.js",

如何在使用第三方模块时测试项目

3 个答案: