React Native Test Error - Unable to find node on an unmounted component

Question

I have very limited knowledge of testing React and React Native apps. So I just started to setup some tests in my React Native app. I am using expo so I have installed jest, jest expo, react-test-renderer. I wanted to check with a very simple test which I'm thinking probably is not a simple test may be because of the navigation but anyways I cannot get past this error below. I'm posting my code for the app, test and the error I see.

In package.json

  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ],

App Component

 import React from 'react';     
 import { createAppContainer } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';
 import MemberHomeScreen from './src/screens/MemberHomeScreen';
 import SignUpScreen from './src/screens/SignUpScreen';
 import { setNavigator } from './src/navigationRef';
 import SignInScreen from './src/screens/SignInScreen';
 import HomeScreen from './src/screens/HomeScreen';
 import MemberDetailsScreen from './src/screens/MemberDetailsScreen';
        
        const appNavigator = createStackNavigator(
          {
            Home: HomeScreen, 
            MemberHome: MemberHomeScreen,
            SignUp: SignUpScreen,
            SignIn: SignInScreen,
            MemberDetails: MemberDetailsScreen
          },
          {
            initialRouteName: 'Home',
            defaultNavigationOptions: {
              title: '',
              headerLeft: () => false,
              headerTitleAlign: 'center'
            }
          }
        );
        
        const App = createAppContainer(appNavigator);
        export default () => {
          return <App ref={navigator => {setNavigator(navigator) }} />
        }

NavigationRef.js

import { NavigationActions } from 'react-navigation';

let navigator;
export const setNavigator = (nav) => {
  navigator = nav;
}

export const navigate = (routeName, params) => {
  navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params
    })
  )
}

Test

import React from "react";
import renderer from "react-test-renderer";
import App from "../../App";

describe("App Component", () => {
    it('renders correctly', () => {
      const tree = renderer.create(<App />)
    });
});

Any ideas what am I doing wrong? Appreciate any guidance. Thank you!

Answer 1

I just ran into the same error after updating my dependencies.

Tests are running fine after downgrading react-test-renderer from major version 17 back to the lastest 16. Seems fine even when react & react-dom are at version 17, although there will be an incorrect peer dependency warning.