Getting ''Invariant Violation: Native module cannot be null.'' when I run the test
This problem happens when you import a native component in the render tree, as the test renderer do not have them. To fix this, either you need to mock the component (https://jestjs.io/docs/en/manual-mocks), or use shallow rendering (https://reactjs.org/docs/shallow-renderer.html)
For your particular case, this is the github issue to help you: https://github.com/naoufal/react-native-safari-view/issues/99
Another solution could be using react-native-mock-render module (the most active fork of react-native-mock)
Jonny
Updated on July 09, 2022Comments
-
Jonny almost 2 years
I have a Login component as below and I am writing some test cases for this component. When I tried to run the test I got the following error:
Test
import renderer from 'react-test-renderer' import Login from '../Login' let props, wrapper beforeEach(() => { props = { loginAttempt: jest.fn(), recoverAttempt: jest.fn(), reset: jest.fn() } wrapper = shallow(<Login {...props} />) }) describe('tests for <Login />', () => { test('should have a formProvider with handlesubmit atribute', () => { const value = wrapper.find('FormProvider') expect(value.length).toBe(1) }) }) //Snapshot test test('Snapshot test for the Contact form', () => { const tree = renderer.create(<Login {...props} />).toJSON() expect(tree).toMatchSnapshot() })
Component
import React, { Component } from 'react' import KeyboardAvoidingWrapper from 'components/Wrappers/KeyboardAvoidingWrapper' export default class AuthScreen extends Component { state = { } toggleRecovery = e => { ) } loginAttempt = data => { } recoverAttempt = data => { } componentWillUnmount() { } render() { let { loginAttempt, toggleRecovery, recoverAttempt, state, props } = this let { recovery } = state let { error, fetching } = props return ( <KeyboardAvoidingWrapper enabled={false} behavior="padding" fluid> UI GOES HERE.. </KeyboardAvoidingWrapper> ) } }
Error
● Test suite failed to run Invariant Violation: Native module cannot be null. at invariant (node_modules/react-native/node_modules/fbjs/lib/invariant.js:40:15) at new NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:36:36) at Object.<anonymous> (node_modules/react-native-safari-view/SafariViewManager.ios.js:12:20) at Object.<anonymous> (node_modules/react-native-safari-view/index.js:1:238)
Why I am getting this error? Is it because the component does not get imported correctly? I could not figure out the why this happening. How can I solve this issue?
-
Jonny over 5 yearsWhy it is only for this component. I have use the same way to test other components they just work except this one @Hari Luong
-
Jarvis Luong over 5 yearsOther components may be Javascript only so it worked. For the components that need native integration, it won’t work. (For example, Map, Calendar, ...)
-
Jarvis Luong over 5 yearsCan you provide list of components rendered in the Login component?
-
Jonny over 5 yearsLogin has a import which is import SafariView from 'react-native-safari-view' and this cause for the failing . No idea about how to configure that
-
Jarvis Luong over 5 yearsI updated my answer, it contains the link to help you mocking the package for testing purpose