Unit test React Native with Mocha

test_mocha.opts

--compilers js:./test/support/compiler
--require ./test/support/init

test_sanity.test.js

/* eslint-env node, mocha */
import NoteEntryScreen from '../src/containers/screens/NoteEntryScreen';
import common from './support/common';
const {createRenderer, React, expect, MockComponents} = common;

function setup() {
  const props = {};

  const renderer = createRenderer();
  renderer.render(<NoteEntryScreen {...props} />);
  const output = renderer.getRenderOutput();

  return {
    props,
    output,
    renderer,
  };
}

describe('NoteEntryScreen', () => {
  it('should render a scrollview', () => {
    const { output } = setup();
    expect(output.type.displayName).to.equal(MockComponents.ScrollView.displayName);
  });
});

test_support_common.js

import chai from 'chai';
import chaiAsPromised from 'chai-as-promised';
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
import {MockComponents} from './mocks/react-native';

chai.use(chaiAsPromised);

export default {
  expect: chai.expect,
  createRenderer: ReactTestUtils.createRenderer,
  React,
  MockComponents,
};

test_support_compiler.js

var fs = require('fs');
var path = require('path');
var babel = require('babel-core');
var origJs = require.extensions['.js'];

require.extensions['.js'] = function (module, fileName) {
  var output;
  if (fileName === '/app/node_modules/react-native/Libraries/react-native/react-native.js') {
    fileName = path.resolve('./test/support/mocks/react-native.js');
  }
  if (fileName.indexOf('node_modules/') >= 0) {
    return (origJs || require.extensions['.js'])(module, fileName);
  }
  var src = fs.readFileSync(fileName, 'utf8');
  output = babel.transform(src, {
    filename: fileName,
    sourceFileName: fileName,
    presets: ['react-native'],
  }).code;

  return module._compile(output, fileName);
};

test_support_mocks_react-native.js

import React from 'react';

function mockComponent(type) {
  const Component = React.createClass({
    displayName: type,
    propTypes: { children: React.PropTypes.node },
    render() { return React.createElement(React.DOM.div, this.props, this.props.children); },
  });
  return Component;
}

const componentsToMock = [
  'View',
  'Text',
  'Component',
  'ScrollView',
  'TextInput',
];

export const MockComponents = componentsToMock.reduce((agg, type) => {
  agg[type] = mockComponent(type);
  return agg;
}, {});

export default {
  ...React,
  ...MockComponents,
  StyleSheet: {
    create: (ss) => ss,
  },
  PropTypes: React.PropTypes,
};