title: React Native jest keep throwing -TypeError: Component is not a function error
body: <p>I am currently facing a problem while I am trying to add a simple unit test using jest. And it keeps throwing the TypeError:Component is not a function error and I cannot fix it. Anyone got the same error before or anyone has any ideas about how to fix it? Really appreciate it!</p>
  
  <p>The test result I got from jest looks like:</p>
  
  <pre><code>Using Jest CLI v11.0.2, jasmine2, babel-jest
  Running 1 test suite...Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
   FAIL  app/views/connections/__tests__/Connections-test.js (3.217s)
  Connections
    ✕ it should return View
  
  Connections › it should return View
    - TypeError: Component is not a function
          at ShallowComponentWrapper._constructComponentWithoutOwner (node_modules/react/lib/ReactCompositeComponent.js:250:8)
          at ShallowComponentWrapper.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:159:15)
          at ShallowComponentWrapper.wrapper [as mountComponent] (node_modules/react/lib/ReactPerf.js:66:13)
          at ReactShallowRenderer._render (node_modules/react/lib/ReactTestUtils.js:385:10)
          at _batchedRender (node_modules/react/lib/ReactTestUtils.js:366:10)
          at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react/lib/Transaction.js:136:12)
          at Object.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:63:13)
          at Object.batchedUpdates (node_modules/react/lib/ReactUpdates.js:97:18)
          at ReactShallowRenderer.render (node_modules/react/lib/ReactTestUtils.js:359:14)
          at renderConnections (app/views/connections/__tests__/Connections-test.js:17:10)
          at Object.eval (app/views/connections/__tests__/Connections-test.js:25:12)
  1 test failed, 0 tests passed (1 total in 1 test suite, run time 9.326s)
  --------------------|----------|----------|----------|----------|----------------|
  File                |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
  --------------------|----------|----------|----------|----------|----------------|
   __mocks__/         |    78.33 |    48.15 |    46.15 |      100 |                |
    react-native.js   |    78.33 |    48.15 |    46.15 |      100 |                |
   views/connections/ |    88.89 |       75 |       50 |       80 |                |
    Connections.js    |    88.89 |       75 |       50 |       80 |              9 |
  --------------------|----------|----------|----------|----------|----------------|
  All files           |    79.71 |    51.61 |    46.67 |    96.15 |                |
  --------------------|----------|----------|----------|----------|----------------|
  </code></pre>
  
  <p>The component I want to test is like the following:</p>
  
  <pre><code>import React, { PropTypes } from 'react';
  import {
    View,
    Text,
  } from 'react-native';
  
  const Connections = React.createClass({
    render () {
      return (
        &lt;View&gt;
          &lt;Text&gt;
            Connections Page
          &lt;/Text&gt;
        &lt;/View&gt;
      )
    }
  })
  
  export default Connections
  </code></pre>
  
  <p>And my package.json is like the following:</p>
  
  <pre><code>{
      "name": "someProject",
      "version": "0.0.6",
      "private": true,
      "scripts": {
          "start": "node node_modules/react-native/local-cli/cli.js start",
          "test_legacy": "mocha --comilers js:babel-core/register --recursive ./test/units/*.js --require ./test/setup.js",
          "test": "rm -rf ./node_modules/jest-cli/.haste_cache &amp;&amp; jest  --no-cache",
          "build-prd": "cd android &amp;&amp; ./gradlew installRelease",
          "clean-install": "rm -r -f node_modules &amp;&amp; npm install"
      },
      "dependencies": {
          "axios": "^0.11.0",
          "install": "^0.7.3",
          "moment": "^2.13.0",
          "npm": "^3.8.9",
          "react": "15.0.2",
          "react-native": "^0.26.2",
          "react-native-animatable": "^0.6.0",
          "react-native-billing": "^1.3.0",
          "react-native-button": "^1.5.0",
          "react-native-carousel": "^0.8.0",
          "react-native-device-info": "^0.9.3",
          "react-native-dismiss-keyboard": "^1.0.0",
          "react-native-drawer": "^2.2.0",
          "react-native-gifted-spinner": "0.0.4",
          "react-native-i18n": "0.0.8",
          "react-native-linear-gradient": "^1.5.9",
          "react-native-modalbox": "^1.3.3",
          "react-native-push-notification": "^1.0.6",
          "react-native-router-flux": "^3.26.0",
          "react-native-scrollable-tab-view": "^0.4.2",
          "react-native-swipeout": "^2.0.12",
          "react-native-swiper": "^1.4.4",
          "react-native-vector-icons": "^2.0.2",
          "react-redux": "^4.4.5",
          "realm": "^0.12.0",
          "redux": "^3.5.2",
          "redux-logger": "^2.6.1",
          "redux-promise": "^0.5.3",
          "redux-thunk": "^2.0.1",
          "socket.io-client": "^1.3.5"
      },
      "devDependencies": {
          "babel": "^6.5.2",
          "babel-core": "^6.9.0",
          "babel-jest": "^12.1.0",
          "babel-polyfill": "^6.9.1",
          "babel-preset-airbnb": "^1.0.1",
          "babel-preset-es2015": "^6.9.0",
          "babel-preset-react": "^6.5.0",
          "babel-preset-react-native": "^1.9.0",
          "babel-preset-stage-0": "^6.5.0",
          "chai": "^3.5.0",
          "enzyme": "^2.3.0",
          "jest-cli": "11.0.2",
          "mocha": "^2.4.5",
          "react-addons-test-utils": "15.0.2",
          "react-dom": "15.0.2"
      },
      "jest": {
          "setupEnvScriptFile": "node_modules/react-native/jestSupport/env.js",
          "testPathIgnorePatterns": ["/node_modules/"],
          "testFileExtensions": [
              "es6", "js"
          ],
          "moduleFileExtensions": [
              "js", "json", "es6"
          ],
          "unmockedModulePathPatterns": [
              "react",
              "react-addons-test-utils",
              "react-native-router-flux",
              "fetch",
              "redux",
              "redux-thunk"
          ],
          "collectCoverage": true,
          "verbose": true,
          "haste": {
              "defaultPlatform": "android",
              "platforms": [
                  "ios", "android"
              ],
              "providesModuleNodeModules": ["react-native"]
          }
      }
  }
  </code></pre>
  
  <p>And finally my sample test case is like:</p>
  
  <pre><code>jest.autoMockOff();
  
  import React, { View } from 'react-native';
  import utils from 'react-addons-test-utils';
  // import React, {View} from 'react-native';
  // import utils from 'react-addons-test-utils';
  
  jest.dontMock('../Connections');
  // import Connections from '../Connections';
  const Connections = require('../Connections');
  
  describe('Connections', (props) =&gt; {
    function renderConnections() {
      const renderer = utils.createRenderer();
      renderer.render(&lt;Connections {...props}/&gt;);
      const output = renderer.getRenderOutput();
      return {
        props,
        output,
        renderer
      };
    }
    it('should return View', () =&gt; {
      const output = renderConnections({someProps: true});
      expect(output).toEqual(View);
    })
  })
  </code></pre>
  
  <p>And I have my mocked react-native.js which looks like:</p>
  
  <pre><code>'use strict';
  /**
   * ## Imports
   *
   * ReactNative is actually React
   */
  const React = require('react');
  const ReactNative = React;
  
  /**
   * ## These need additional mocking
   *
   * ReactNative is actually React
   */
  ReactNative.StyleSheet = {
      create: function create(styles) {
          return styles;
      }
  };
  class View extends React.Component {
      render() { return false; }
  }
  class PixelRatio extends React.Component {
      static get() { return 1; }
  }
  /**
   * ## Stubs
   *
   * Simple replacements for testing
   */
  ReactNative.View = View;
  ReactNative.ScrollView = View;
  ReactNative.Text = View;
  ReactNative.TouchableOpacity = View;
  ReactNative.TouchableHighlight = View;
  ReactNative.TouchableWithoutFeedback = View;
  ReactNative.ToolbarAndroid = View;
  ReactNative.Image = View;
  ReactNative.PixelRatio = PixelRatio;
  ReactNative.NativeModules= {};
  
  ReactNative.Platform = {};
  module.exports = ReactNative;
  </code></pre>