NativeBase
NativeBase copied to clipboard
`React.createElement: type is invalid` when running tests
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.
Hey @akinzalowevidation, Thanks for reporting the issue. We'll fix it.
Same over here!
any news on this ?
@ankit-tailor Any news on this fix?
Any updates for this Issue ?
@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 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