Jest testing React-native component which uses NavigationEvents trows error

Question

I'm having some troubles Jest testing a component which uses {NavigationEvents} from 'react-navigation' this is the part of the component where i use it:

render() {
    const spinner = this.state.isLoading ? (
      <ActivityIndicator size="large" />
    ) : null;
    return (
      <ScrollView 
        style={styles.container} 
        keyboardDismissMode="on-drag"
        testID='SettingContainer'>
        <NavigationEvents
          onWillBlur={payload =>
            locationGetter.checkLocationData(
              payload,
              'Settings',
              this.props.t,
              this.props.location,
              'getPrayerPage',
            )
          }
        />

Now when i run this basic test :

import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import {I18nextProvider} from 'react-i18next';
import i18n from 'config/i18nForTest';
import {Settings} from 'containers/Settings'; // to get redux connected component import Setting without {}
// import configureStore from 'redux-mock-store';
// import { Provider } from 'react-redux';

// const mockStore = configureStore([]);
// const store = mockStore({ contacts: [ ] });
it('Does Settings renders correctly?', () => {
  const tree = renderer
    .create(
      <Settings t={key => key}  />,
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});

i get this error :

  ● Does Settings renders correctly?

    Invariant Violation: withNavigation can only be used on a view hierarchy of a navigator. The wrapped component is unable to get access to navigation from props or context.

      at invariant (node_modules/@react-navigation/core/lib/commonjs/utils/invariant.js:41:20)
      at node_modules/@react-navigation/core/lib/commonjs/views/withNavigation.js:22:15
      at updateContextConsumer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7275:19)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7441:14)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10138:12)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10170:24)
      at renderRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10256:7)
      at performWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11121:7)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11033:7)
      at performSyncWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11007:3)

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8060
    The above error occurred in the <Context.Consumer> component:
        in withNavigation(NavigationEvents) (at Settings.js:116)
        in View (created by View)
        in View (at ScrollViewMock.js:29)
        in RCTScrollView (created by _class)
        in _class (at ScrollViewMock.js:27)
        in ScrollViewMock (at Settings.js:112)
        in Settings (at setting.test.js:20)

Jest config in package.json:

"jest": {
   "verbose":true,
   "setupFiles": ["<rootDir>/jest.setup.js"],
   "preset": "react-native",
   "testMatch": [
     "<rootDir>/tests/**/*.test.js?(x)",
     "<rootDir>/src/**/*.test.js"
   ],
   "transformIgnorePatterns": ["node_modules/(?!(jest-)?react-native|react-navigation|@react-native-community|@react-navigation/.*)" 
   ],
   "transform": {
     "^.+\\.(js)$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
   }
 }

It seems like NavigationEvents is wrapped in withNavigation but i don't know how to mock this behavior. Also i cant find in react-navigation docs how to implement some testing logic, do i have to mock the library or not? Any help would be greatly appreciated.

THANKS!

B. Mohammad · Accepted Answer · 2020-02-10 15:18:27Z

3

The solution i found for this problem, is adding this mock to jest.config.js file:

jest.mock('react-navigation', () => ({
  NavigationEvents: 'mockNavigationEvents',
}));

answered Feb 10, 2020 at 15:18

B. Mohammad

2,4941 gold badge19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jdnichollsc Over a year ago

It gives me another error: FAIL src/containers/LookList/__tests__/index.test.tsx ● Test suite failed to run TypeError: Cannot read property 'light' of undefined at Object.<anonymous> (node_modules/react-navigation-tabs/lib/commonjs/views/BottomTabBar.tsx:538:22)

B. Mohammad Over a year ago

may be you need to also mock react-navigation-tabs

Collectives™ on Stack Overflow

Jest testing React-native component which uses NavigationEvents trows error

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related