Skip to content

docs: troubleshooting undefined components #1502

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 19, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 39 additions & 1 deletion website/docs/Troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import TOCInline from '@theme/TOCInline';
This guide describes common issues found by users when integrating React Native Test Library to their projects:

<TOCInline toc={toc} />

## Matching React Native, React & React Test Renderer versions

Check that you have matching versions of core dependencies:
Expand All @@ -33,6 +32,45 @@ We maintain an [example repository](https://github.com/callstack/react-native-te

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.:

```ts
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:

```ts
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.:

```ts
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:
Expand Down