I'm having some issues getting a basic test to compile. I'm fairly new to React Native / Mocha / Babel so any insight would be helpful.
/* .babelrc */
{
"presets": ["stage-1", "react-native"]
}
/* MyComponent.js */
'use strict';
var React = require('react-native');
var {View, Text, StyleSheet, TouchableHighlight} = React;
var Button = require('react-native-button');
var Actions = require('react-native-router-flux').Actions;
class MyComponent extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.baseText}>Test!</Text>
<Button onPress={()=>Actions.login({data:"Custom data", title:'Custom title' })}>Go to Login page</Button>
<Button onPress={Actions.signup}>Go to Register page</Button>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent',
},
baseText: {
fontFamily: 'Raleway-Regular'
}
});
module.exports = MyComponent;
/* MyComponent_spec.js */
import React from 'react';
import { shallow } from 'enzyme';
import { View, Text, StyleSheet } from 'react-native';
import MyComponent from '../../../react/components/ecosystems/MyComponent';
describe("<MyComponent/>", () => {
it('should render', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper).to.be.ok;
});
});
/* package.json */
{
"name": "Test",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "mocha --require ./test/setup.js --compilers js:babel-core/register 'test/**/*.@(js|jsx)'"
},
"dependencies": {
"immutable": "^3.7.6",
"react-native": "^0.21.0",
"react-native-button": "^1.4.2",
"react-native-router-flux": "^2.3.12",
"react-redux": "^4.4.0",
"redux": "^3.3.1"
},
"devDependencies": {
"babel-cli": "^6.6.5",
"babel-core": "^6.7.2",
"babel-plugin-transform-es2015-modules-commonjs": "^6.7.0",
"babel-polyfill": "^6.7.2",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-native": "^1.5.2",
"babel-preset-stage-1": "^6.5.0",
"chai": "^3.5.0",
"chai-immutable": "^1.5.3",
"enzyme": "^2.1.0",
"mocha": "^2.4.5",
"react": "^0.14.7",
"react-addons-test-utils": "^0.14.7",
"react-dom": "^0.14.7",
"react-native-mock": "0.0.6",
"redux-devtools": "^3.1.1",
"sinon": "^1.17.3",
"slash": "^1.0.0"
}
}
/* ./test/setup.js */
"use strict";
require("babel-polyfill");
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)) {
// if not in node_modules, we want to compile it
return false;
} else if ((/\/node_modules\/react-native\//).test(filename)) {
// it's RN source code, so we want to compile it
return false;
} else {
// it's in node modules and NOT RN source code
var modulesToCompileArray = [
"react-native-button",
"react-native-router-flux",
"react-native-tabs",
"exponent",
"react-native-clone-referenced-element",
];
for (var i = 0; i < modulesToCompileArray.length; i++) {
if (filename.includes(modulesToCompileArray[i])) {
return false;
}
}
return true;
}
}
require("babel-core/register")(config);
global.__DEV__ = true;
var chai = require('chai');
var chaiImmutable = require('chai-immutable');
global.expect = chai.expect;
chai.use(chaiImmutable);
require("react-native-mock/mock");
This is the error that I get when running the tests.
npm run test
> [email protected] test .../src...
> mocha --require ./test/setup.js --compilers js:babel-core/register 'test/**/*.@(js|jsx)'
.../src.../node_modules/@exponent/react-native-navigator/ExSceneConfigs.js:193
Fade:_reactNative.Navigator.SceneConfigs.FadeAndroid,
^
TypeError: Cannot read property 'FadeAndroid' of undefined
at Object.<anonymous> (ExSceneConfigs.js:193:9)
at Module._compile (module.js:413:34)
at loader (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:126:5)
at Object.require.extensions.(anonymous function) [as .js] (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.<anonymous> (ExRouteRenderer.js:16:1)
at Module._compile (module.js:413:34)
at loader (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:126:5)
at Object.require.extensions.(anonymous function) [as .js] (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.<anonymous> (ExNavigator.js:16:1)
at Module._compile (module.js:413:34)
at loader (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:126:5)
at Object.require.extensions.(anonymous function) [as .js] (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.<anonymous> (ExRouter.js:5:1)
at Module._compile (module.js:413:34)
at loader (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:126:5)
at Object.require.extensions.(anonymous function) [as .js] (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.<anonymous> (Router.js:12:1)
at Module._compile (module.js:413:34)
at loader (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:126:5)
at Object.require.extensions.(anonymous function) [as .js] (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.<anonymous> (index.js:4:1)
at Module._compile (module.js:413:34)
at loader (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:126:5)
at Object.require.extensions.(anonymous function) [as .js] (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.<anonymous> (Welcome.js:6:15)
at Module._compile (module.js:413:34)
at loader (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:126:5)
at Object.require.extensions.(anonymous function) [as .js] (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object.<anonymous> (Welcome_spec.js:5:1)
at Module._compile (module.js:413:34)
at loader (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:126:5)
at Object.require.extensions.(anonymous function) [as .js] (.../src.../node_modules/babel-core/node_modules/babel-register/lib/node.js:136:7)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at .../src.../node_modules/mocha/lib/mocha.js:219:27
at Array.forEach (native)
at Mocha.loadFiles (.../src.../node_modules/mocha/lib/mocha.js:216:14)
at Mocha.run (.../src.../node_modules/mocha/lib/mocha.js:468:10)
at Object.<anonymous> (.../src.../node_modules/mocha/bin/_mocha:403:18)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Function.Module.runMain (module.js:447:10)
at startup (node.js:141:18)
at node.js:933:3
npm ERR! Darwin 15.3.0
npm ERR! argv "/Users/noobs/.nvm/versions/node/v5.7.1/bin/node" "/Users/noobs/.nvm/versions/node/v5.7.1/bin/npm" "run" "test"
npm ERR! node v5.7.1
npm ERR! npm v3.6.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] test: `mocha --require ./test/setup.js --compilers js:babel-core/register 'test/**/*.@(js|jsx)'`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script 'mocha --require ./test/setup.js --compilers js:babel-core/register 'test/**/*.@(js|jsx)''.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the TestApp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! mocha --require ./test/setup.js --compilers js:babel-core/register 'test/**/*.@(js|jsx)'
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs TestApp
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls TestApp
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! .../src.../npm-debug.log
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent