#Troubleshooting

This guide describes common issues found by users when integrating React Native Test Library to their projects:

#Example repository

We maintain an example repository that showcases a modern React Native Testing Library setup with TypeScript, etc.

In case something does not work in your setup you can refer to this repository for recommended configuration.

#Undefined component error

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

This frequently happens when you mock a complex module incorrectly, e.g.:

jest.mock('@react-navigation/native', () => {
  return {
    useNavigation: jest.fn(),
  };
});

The above mock will mock useNavigation hook as intended, but at the same time all other exports from @react-navigation/native package are now undefined. If you want to use NavigationContainer component from the same package it will be undefined and result in the error above.

In order to mock only a part of given package you should re-export all other exports using jest.requireActual helper:

jest.mock('@react-navigation/native', () => {
  return {
    ...jest.requireActual('@react-navigation/native'),
    useNavigation: jest.fn(),
  };
});

That way the mock will re-export all of the @react-navigation/native members and overwrite only the useNavigation hook.

Alternatively, you can use jest.spyOn to mock package exports selectively.

#Mocking React Native

In case of mocking react-native package you should not mock the whole package at once, as this approach has issues with jest.requireActual call. In this case it is recommended to mock particular library paths inside the package, e.g.:

jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter');

#Act warnings

When writing tests you may encounter warnings connected with act() function. There are two kinds of these warnings:

• sync act() warning - Warning: An update to Component inside a test was not wrapped in act(...)
• async act() warning - Warning: You called act(async () => ...) without await

You can read more about act() function in our understanding act function guide.

Normally, you should not encounter sync act() warnings, but if that happens this probably indicate an issue with your test and should be investigated.

In case of async act() function this might happen more or less randomly, especially if your components contain async logic. So far this warning does not seem to affect test correctness.