Getting ''Invariant Violation: Native module cannot be null.'' when I run the test

Question

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?

Top-Master · Accepted Answer · 2023-03-11 04:53:02Z

10

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 OP's particular component, 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)

Note that really "native" tests, like Android's JUnit or iOS's XCTest, can run on the device or emulator or simulator.

Hence the need to "Mock" GUI is only a limitation of react-native and/or Jest, where to test modules which require "native integration" you need to learn both Android's JUnit and iOS's XCTest.

edited Mar 11, 2023 at 4:53

Top-Master

9,0396 gold badges52 silver badges97 bronze badges

answered Dec 21, 2018 at 6:00

D. H Luong

1,36610 silver badges14 bronze badges

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

6 Comments

Jonny Over a year ago

Why it is only for this component. I have use the same way to test other components they just work except this one @Hari Luong

D. H Luong Over a year ago

Other components may be Javascript only so it worked. For the components that need native integration, it won’t work. (For example, Map, Calendar, ...)

D. H Luong Over a year ago

Can you provide list of components rendered in the Login component?

Jonny Over a year ago

Login 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

D. H Luong Over a year ago

I updated my answer, it contains the link to help you mocking the package for testing purpose

|

Collectives™ on Stack Overflow

Getting ''Invariant Violation: Native module cannot be null.'' when I run the test

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related