未转译使用的第 3 方模块时如何测试项目

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 转译这些模块，或者是否有其他方法让我的测试达到运行？

更新

似乎非转译的第 3 方模块在 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

我在下面列出了我当前的解决方法，以防有人觉得它有用。

Answer 1

而不是 --compilers js:babel-core/register 你可以尝试创建你自己的脚本来调用 require 钩子（顺便说一句，最好使用 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

那是我的 testHelper.js 来处理 react-native- 第 3 方模块

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",

Answer 3

我目前的解决方案如下（假设 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:{}});

未转译使用的第 3 方模块时如何测试项目

How to test project when 3rd party modules used aren't transpiled

mocha.js

npm

babeljs

react-native

enzyme