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

[akinzalowevidation]

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 <Context.Provider> 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(
      <NativeBaseProvider theme={theme} initialWindowMetrics={inset}>
        <Text>test!</Text>
      </NativeBaseProvider>
    );
    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.

[ankit-tailor]

Hey @akinzalowevidation, Thanks for reporting the issue. We'll fix it.

[daniel-moya]

Same over here!

[daniel-moya]

any news on this ?

[akinzalowevidation]

@ankit-tailor Any news on this fix?

[daniel-moya]

Any updates for this Issue ?

[akinzalowevidation]

@daniel-moya I discovered that this issue was happening due to improper mocking of react-native-safe-area-context.

Adding the following to mocks fixed the issue for me:

import mockSafeAreaContext from "react-native-safe-area-context/jest/mock";
jest.mock("react-native-safe-area-context", () => mockSafeAreaContext);

[daniel-moya]

@daniel-moya I discovered that this issue was happening due to improper mocking of react-native-safe-area-context.

Adding the following to mocks fixed the issue for me:

import mockSafeAreaContext from "react-native-safe-area-context/jest/mock";
jest.mock("react-native-safe-area-context", () => mockSafeAreaContext);

This worked for me! Thanks @akinzalowevidation