如何在使用第三方模塊時未測試項目時測試項目

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

能正常工作和我自己的代碼是否正確transpiled，但是當我包括不transpile他們的代碼（例如https://github.com/aksonov/react-native-router-flux）一個模塊，我的測試拒絕，因爲它的誤差在運行這些模塊中的導入語句。

如何讓babel transpile這些模塊或有另一種方式讓我的測試運行？

更新

看來，非transpiled第三方模塊是相當普遍與之反應，因爲原住民土著做出反應本身並不transpiled。

該解決方案似乎確實是強制轉譯和使用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

我目前的解決方法如下（按給出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 2

而不是做--compilers js:babel-core/register的你可以嘗試創建自己的腳本，調用需要掛鉤（和BTW，最好使用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 3

這是我的testHelper。JS處理反應，native-屆黨模塊

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