Jest testing React-native component which uses NavigationEvents trows error - react-native

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!

Answer 1

The solution i found for this problem, is adding this mock to jest.config.js file:
jest.mock('react-navigation', () => ({
NavigationEvents: 'mockNavigationEvents',
}));