So testen Sie das Projekt, wenn Module von Drittanbietern nicht transpiliert werden

Question

Ich versuche, ein Enzym zu verwenden, um mein React Native-Projekt zu testen, und habe die Installationsanweisungen befolgt.

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

Dies funktioniert gut, und mein eigener Code richtig transpiled, aber wenn ich ein Module enthalten, die ihren Code nicht transpile (https://github.com/aksonov/react-native-router-flux zum Beispiel), verweigern meine Tests, da es Fehler laufen an die Importanweisungen in diesen Modulen.

Wie kann ich diese Module babel transpilieren lassen oder gibt es eine andere Möglichkeit, meine Tests auszuführen?

aktualisieren

Es scheint, dass nicht transpiled 3rd-Party-Module sind relativ häufig mit Mutter reagieren, da Mutter Reaktion selbst nicht transpiled wird.

Die Lösung scheint eine Kombination von erzwungenem transpiling und der Verwendung von react-native-mock zu sein. https://github.com/facebook/react-native/issues/5392

Allerdings habe ich weitere Probleme mit reactive-router-flux aufgrund Navigationsexperimental nicht verspottet.

Related Links sind:

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

Ich werde hier aktualisieren, wenn ich eine Lösung finden.

aktualisieren 2

Ich habe meine aktuelle Problemumgehung unten enthalten, falls jemand es nützlich findet.

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

Answer 1

Meine aktuelle Lösung zu handhaben ist als (gegeben für NavigationExperimental in ReactNativeMock keine aktuelle Unterstützung) folgt:

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

Statt --compilers js:babel-core/register zu tun, versuchen Sie könnten Ihr eigenes Skript erstellen, die den Haken erfordern ruft (und BTW ist es besser babel-register Paket zu verwenden) und verwenden Sie die only|ignore Option:

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

mocha --require ./init.js 

Das ist im Allgemeinen eine wirklich zweifelhafte Art, ein Paket zu veröffentlichen. Dies wird davon ausgegangen, dass die .babelrc mit dem Paket veröffentlicht wird. Trotzdem, da Sachen, auf die es Bezug nimmt, devDependencies genannt werden, scheint es, als müssten Sie manuell in seinen Ordner gehen und sie installieren.

Answer 3

Das ist mein TestHelper.reagieren-mutter 3. Partei Module js

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); 

und das ist mein npm Test

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