GeekyAnts / GeekyAnts/NativeBase

`React.createElement: type is invalid` when running tests

Open
#5,348 7 comments 1 reaction 0 assignees View on GitHub
bug triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

Jest tests with @testing-library/react-native are failing with an error

### CodeSandbox/Snack link

N/A

### Steps to reproduce

I am getting the following error when attempting to render a component in a jest test:
```
console.error
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `NativeBaseProvider`.
at NativeBaseProvider (/node_modules/native-base/lib/commonjs/core/NativeBaseProvider.tsx:51:9)

console.error
The above error occurred in the component:

at Provider (/node_modules/native-base/lib/commonjs/utils/createContext.tsx:9:11)
at NativeBaseProvider (/node_modules/native-base/lib/commonjs/core/NativeBaseProvider.tsx:51:9)
```

Here is how I have setup the test:

`Component.test.tsx`
```
import { NativeBaseProvider, Text } from "native-base";
import React from "react";
import { render } from "@testing-library/react-native";

import { theme } from "../theme";

const inset = {
frame: { x: 0, y: 0, width: 0, height: 0 },
insets: { top: 0, left: 0, right: 0, bottom: 0 },
};

describe("Text Component", () => {
test(`it should render`, () => {
const { toJSON } = render(

test!

);
expect(toJSON()).toMatchSnapshot();
});
});

```

`package.json`
```
"@testing-library/react": "^11.0.0",
"@testing-library/react-native": "^8.0.0",
"native-base": "^3.4.4",
"jest": "^26.6.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-linear-gradient": "^2.6.2",
"react-native-svg": "^12.4.4",
```

`jest.config.js`
```
module.exports = {
preset: "react-native",
transformIgnorePatterns: [
"node_modules/(?!(jest-)?@react-native|react-native|react-clone-referenced-element|@react-native-firebase|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)",
],
verbose: true,
};

```

### NativeBase Version

3.4.4

### Platform

- [x] Android
- [ ] CRA
- [ ] Expo
- [x] iOS
- [ ] Next

### Other Platform

_No response_

### Additional Information

I have tried upgrading, `@testing-library/react-native`, `jest` and using `ts-jest` and that did not solve the issue.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.