Skip to content

Jest - Error Unit Testing Router Component #1655

@Sushant-Sardeshpande

Description

@Sushant-Sardeshpande

Version

Tell us which versions you are using:

  • react-native-router-flux v3.37.0
  • react-native v0.41.2
  • jest v18.1.0
  • jest-react-native v18.0.0

When trying to test the Router component with jest, I am getting an error:
(Stacktrace)
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

  at invariant (node_modules\fbjs\lib\invariant.js:44:15)
  at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (node_modules\react-test-renderer\lib\instantiateReactComponent.js:77:56)
  at ReactCompositeComponentWrapper.performInitialMount (node_modules\react-test-renderer\lib\ReactCompositeComponent.js:367:22)
  at ReactCompositeComponentWrapper.mountComponent (node_modules\react-test-renderer\lib\ReactCompositeComponent.js:258:21)
  at Object.mountComponent (node_modules\react-test-renderer\lib\ReactReconciler.js:46:35)
  at mountComponentIntoNode (node_modules\react-test-renderer\lib\ReactTestMount.js:55:31)
  at ReactTestReconcileTransaction.perform (node_modules\react-test-renderer\lib\Transaction.js:140:20)
  at batchedMountComponentIntoNode (node_modules\react-test-renderer\lib\ReactTestMount.js:69:27)
  at ReactDefaultBatchingStrategyTransaction.perform (node_modules\react-test-renderer\lib\Transaction.js:140:20)
  at Object.batchedUpdates (node_modules\react-test-renderer\lib\ReactDefaultBatchingStrategy.js:62:26)

On trying to mock the module, I get the error:
(Stacktrace)
TypeError: Super expression must either be null or a function, not object

  at _inherits (node_modules\react-native\jest\mockComponent.js:9:988)
  at node_modules\react-native\jest\mockComponent.js:15:40
  at Object.<anonymous>.module.exports (node_modules\react-native\jest\mockComponent.js:24:24)
  at null.user;;D:\Elivo_Projects\ARIA on the Go\ReactNativeDevelopment\ARIAMobile\trunk\ARIAMobile\__mocks__\react-native-router-flux.js (__tests__\RouterTest.test.js:11:8)
  at Object.<anonymous> (src\RouterTest.js:2:28)

Files:
RouterTest.js

import React, { Component } from 'react';
import { Scene, Router } from 'react-native-router-flux';

import Logo from './components/common/Logo';

class RouterTest extends Component {
render() {
return(
<Router sceneStyle={{ paddingTop: 60 }}
navigationBarStyle={{backgroundColor: '#48657E'}}
titleStyle={{color: '#FFF'}}
leftButtonIconStyle = {{ tintColor:'#FFF'}}
rightButtonIconStyle = {{ tintColor:'#FFF'}}
>


);
}
};

export default RouterTest;

RouterTest.test.js:

import 'react-native';
import React from 'react';

import { RouterTest } from '../src/RouterTest';
import renderer from 'react-test-renderer';

// Tried with and without mocking
/*
jest.mock('react-native-router-flux', () => {
const mockComponent = require('react-native/jest/mockComponent');
return mockComponent('react-native-router-flux');
});
*/

test('default route', () => {
const component = renderer.create(
< RouterTest />
);
let routerTest = component.toJSON();
expect(routerTest).toMatchSnapshot();
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions