Tests Fail for Imported Components

[joncursi]

When running mocha tests on components that contain StackNavigation components somewhere in the child tree, the test will error out. Here's an example of a valid Enzyme test failing due to inability to process this package:

$ mocha --require imports/ui/helpers/test/setup.js --compilers js:babel-register --recursive imports/**/*.tests.js --reporter spec

/Users/jcursi/Sites/joncursi/redbirdNative/node_modules/@exponent/ex-navigation/src/ExNavigationStyles.js:33
sceneAnimations:CardStackStyleInterpolator.forHorizontal,
                                          ^

TypeError: Cannot read property 'forHorizontal' of undefined
    at Object.<anonymous> (ExNavigationStyles.js:33:20)
    at Module._compile (module.js:541:32)
    at Module.replacementCompile (/Users/jcursi/Sites/joncursi/redbirdNative/node_modules/append-transform/index.js:63:13)
    at loader (/Users/jcursi/Sites/joncursi/redbirdNative/node_modules/babel-register/lib/node.js:148:5)
    at require.extensions.(anonymous function) (/Users/jcursi/Sites/joncursi/redbirdNative/node_modules/babel-register/lib/node.js:158:7)
    at Object.<anonymous> (/Users/jcursi/Sites/joncursi/redbirdNative/node_modules/append-transform/index.js:67:4)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)

[joncursi]

Note that my setup.js file for mocha already denotes pre-transpilation of this package with Babel before running the test, yet it still fails.

// setup.js

import fs from 'fs';
import path from 'path';
import register from 'babel-core/register';

// Ignore all node_modules except these
const modulesToCompile = [
  '@exponent/ex-navigation',
  'react-clone-referenced-element',
  'react-native',
  'react-native-material-design',
  'react-native-mock',
].map((moduleName) => new RegExp(`/node_modules/${moduleName}`));

const rcPath = path.join(__dirname, '../../../..', '.babelrc');
const source = fs.readFileSync(rcPath).toString();
const config = JSON.parse(source);

config.ignore = (filename) => {
  if ((/\/node_modules\//).test(filename)) {
    const matches = modulesToCompile.filter((regex) => regex.test(filename));
    const shouldIgnore = matches.length === 0;
    return shouldIgnore;
  }
  return false;
};

register(config);

// Setup mocks
require('react-native-mock/mock');

[joncursi]

~~Update: I've isolated the failures to components that use the @withNavigation decorator. There needs to be a way to mock this somehow for the tests, but I'm not sure how.~~

import { connect } from 'react-redux';
import { withNavigation } from '@exponent/ex-navigation';

@withNavigation
export class TheComponent extends Component {
  ...
}

export default connect(mapStateToProps, mapDispatchToProps)(TheComponent);

Update 2: I lied.

After doing some more debugging, I've come to the conclusion that pretty much every exportable by this library seems to cause the transpile error.

import { StackNavigation } from '@exponent/ex-navigation';
import { withNavigation } from '@exponent/ex-navigation';
import { createRouter } from '@exponent/ex-navigation';

[joncursi]

~~Theoretically this issue would be resolved if we could connect to ex-navigation's redux store, as that would eliminate the need for @withNavigation altogether.~~ Not necessarily true per Update 2 above.

Related: https://github.com/exponentjs/ex-navigation/issues/44 https://github.com/exponentjs/ex-navigation/issues/39

[skevy]

@joncursi is there any way you could provide a small example repo that isolates this case? we don't use mocha @ exponent, so it's difficult for me to test this without code

[sibelius]

@joncursi did u solve ur issue?

[damusnet]

This did the trick for me to run my mocha tests again after installing @exponent/ex-navigation:

mockery.registerMock('@exponent/ex-navigation', {
  createRouter: () => {},
});

Not fully published yet, but see this other issue for more info.

[sibelius]

I think https://github.com/lelandrichardson/react-native-mock provides a lot of mocked versions of the component

Otherwise, jest automock all the component itself, making in much easier to test

[damusnet]

Agreed, however lelandrichardson/react-native-mock only mocks react-native core native modules, not third party libraries, and yes, while Jest has become really nice to work with thanks to its handy mocking feature, you can't alway make the switch from your testing library (Mocha in this case).

[sibelius]

there are some really good codemods to help in this case

https://github.com/skovhus/jest-codemods