React-native-router-flux: Issues with unit testing components that import RNRF

[rlau1115]

I've been wrestling with setting up a unit test for a component that uses react-native-router-flux: here

Has anyone been able to get tests running in their own projects that use this routing module?

Any thoughts would be greatly appreciated!

/* .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

[aksonov]

Okey, i'm working now on 3.0 release, that release will not have any problems with unit tests, so you need to wait. Or community could suggest something.

[rlau1115]

Thanks for letting me know. Do you have an ETA on when you're releasing 3.0?

Also open to hear the community's thoughts.

[aksonov]

Check 3.0 release, now the component uses new React Native Navigation API and it should be easier to test. However it has a little bit different API comparing with 2.x release. Anyway I'm closing this ticket because 2.x release will not be supported except critical bugs.

[vysakh0]

@aksonov Unfortunately running into a similar error :disappointed:
I installed the latest package 3.2.6, and getting this error ("react": "0.14.8", "react-native": 0.22.2")

$ mocha  --require test/setup.js  --compilers js:babel-core/register  test/components/Home.spec.js  

/home/vysakh/react-projects/app/node_modules/react-native-router-flux/src/NavBar.js:29
NavigationAnimatedView=_reactNative.NavigationExperimental.AnimatedView;var 
                                                          ^

TypeError: Cannot read property 'AnimatedView' of undefined
    at Object.<anonymous> (NavBar.js:29:19)
    at Module._compile (module.js:434:26)
    at loader (/home/vysakh/react-projects/app/node_modules/babel-core/node_modules/babel-register/lib/node.js:126:5)
    at Object.require.extensions.(anonymous function) [as .js] (/home/vysakh/react-projects/app/node_modules/babel-core/node_modules/babel-register/li
b/node.js:136:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (TabBar.js:5:1)
    at Module._compile (module.js:434:26)
    at loader (/home/vysakh/react-projects/app/node_modules/babel-core/node_modules/babel-register/lib/node.js:126:5)
    at Object.require.extensions.(anonymous function) [as .js] (/home/vysakh/react-projects/app/node_modules/babel-core/node_modules/babel-register/li

This happens when I have this line,

import { Actions } from 'react-native-router-flux';

Please help :+1: