I'm developing a React Native application. I'm doing something like what's explained here to implement the authentication flow. So, I created an AppContainer
that looks like this:
import {createAppContainer, createSwitchNavigator, createStackNavigator} from "react-navigation";
import AuthLoadingScreen from "../screens/auth/auth-loading-screen";
const AppStack = createStackNavigator({ Home: {screen: HomeScreen} });
const AuthStack = createStackNavigator({ SignIn: {screen: SignInScreen} });
const AppContainer = createAppContainer(
createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: "AuthLoading",
},
),
);
export {AppContainer};
export default AppContainer;
Then, here's what I have in my App.tsx
:
import React from "react";
import AppContainer from "./src/navigation/index";
const App = () => {
return <AppContainer />;
};
export default App;
And, here is my App.test.tsx
:
import 'react-native';
import React from 'react';
import App from '../App';
import renderer from 'react-test-renderer';
it('renders correctly', () => {
renderer.create(<App />);
});
Here's the jest
configuration in my package.json
file:
"jest": {
"preset": "react-native",
"setupFiles": [
"./node_modules/react-native-gesture-handler/jestSetup.js"
],
"transformIgnorePatterns": [
"node_modules/(?!react-native|@react-native-community/*|react-navigation|react-navigation-stack|@react-navigation/.*)"
],
"timers": "fake",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
},
Now, when I run yarn test
, the test passes, but I get the following error:
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.
at Object.get useTheme [as useTheme] (node_modules/@react-navigation/core/lib/commonjs/index.js:3:18)
at Object.get [as useTheme] (node_modules/react-navigation/src/index.js:169:19)
at useTheme (node_modules/react-navigation-stack/lib/commonjs/utils/useTheme.js:65:36)
at CardContainer (node_modules/react-navigation-stack/lib/commonjs/vendor/views/Stack/CardContainer.tsx:165:5)
at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5762:18) PASS __tests__/App-test.tsx (10.657s) ✓ renders correctly (93ms)
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10695
The above error occurred in the <CardContainer> component:
in CardContainer (created by CardStack)
in View (created by View)
in View (created by MaybeScreen)
in MaybeScreen (created by CardStack)
in View (created by View)
in View (created by MaybeScreenContainer)
in MaybeScreenContainer (created by CardStack)
in CardStack (created by KeyboardManager)
in KeyboardManager (created by Context.Consumer)
in RNCSafeAreaView (created by RNCSafeAreaView)
in RNCSafeAreaView (at src/index.tsx:28)
in SafeAreaProvider (created by Context.Consumer)
in SafeAreaProviderCompat (created by StackView)
in View (created by View)
in View (created by StackView)
in StackView (created by StackView)
in StackView
in Unknown (created by Navigator)
in Navigator (created by SceneView)
in SceneView (created by SwitchView)
in SwitchView (created by Navigator)
in Navigator (created by NavigationContainer)
in NavigationContainer (created by App)
in App
React will try to recreate this component tree from scratch using the error boundary you provided, NavigationContainer.
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10695
The above error occurred in the <NavigationContainer> component:
in NavigationContainer (created by App)
in App
Consider adding an error boundary to your tree to customize error handling behavior.
How can I fix that?