React Native 玩笑不断抛出 -TypeError: Component is not a function error

Question

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!

The test result I got from jest looks like:

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 |                |
--------------------|----------|----------|----------|----------|----------------|

The component I want to test is like the following:

import React, { PropTypes } from 'react';
import {
  View,
  Text,
} from 'react-native';

const Connections = React.createClass({
  render () {
    return (
      <View>
        <Text>
          Connections Page
        </Text>
      </View>
    )
  }
})

export default Connections

And my package.json is like the following:

{
    "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 && jest  --no-cache",
        "build-prd": "cd android && ./gradlew installRelease",
        "clean-install": "rm -r -f node_modules && 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"]
        }
    }
}

And finally my sample test case is like:

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) => {
  function renderConnections() {
    const renderer = utils.createRenderer();
    renderer.render(<Connections {...props}/>);
    const output = renderer.getRenderOutput();
    return {
      props,
      output,
      renderer
    };
  }
  it('should return View', () => {
    const output = renderConnections({someProps: true});
    expect(output).toEqual(View);
  })
})

And I have my mocked react-native.js which looks like:

'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;

Answer 1

使用yarn start或npm start重新启动 Metro bundler 解决了我的问题

Answer 2

I'm guessing your import in your test:

jest.autoMockOff();

import React, { View } from 'react-native';

might not actually be importing your custom react-native.js

Did you want to use a relative ./react-native import instead?

Answer 3

如果您忘记从模块中导出组件，则Component is not a function也可以出现。

Answer 4

Before I was using this that's why showing error ("Component is not a function error) export default withServices(withTheme(s(G11N.withG11N(connected(HistoryModalWrapper))));

After Changed to below export default () => withServices(withTheme(s(G11N.withG11N(connected(HistoryModalWrapper))));