Categories
Mastering Development

How to test react navigation authentication flow?

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?

Leave a Reply

Your email address will not be published. Required fields are marked *