[SOLVED] Jest: NavigationContainer error | An update to ForwardRef(NavigationContainer) inside a test was not wrapped in act

ORIGINAL CODE:

describe('Entry Point Android', () => {
let getByTestId;
let androidWrapperInstance;

beforeAll(async () => {
setPlatform('android');
const utils = render(<App />);
getByTestId = utils.getByTestId;
androidWrapperInstance = getByTestId('android_wrapper');
});

afterAll(() => {
jest.clearAllMocks();
});

it('should render android wrapper', async () => {
expect(androidWrapperInstance).toBeTruthy();
})
})

SOLUTION

describe('Entry Point Android', () => {
let getByTestId;
let androidWrapperInstance;

beforeAll(async () => {
setPlatform('android');
const utils = render(<App />);
await act(async () => {}) <<--- ADDING THIS AFTER THE RENDER SORTED OUT THE ISSUE
getByTestId = utils.getByTestId;
androidWrapperInstance = getByTestId('android_wrapper');
});

afterAll(() => {
jest.clearAllMocks();
});

it('should render android wrapper', async () => {
expect(androidWrapperInstance).toBeTruthy();
})

})

It appears that the error has something to do with the setTimeout inside React.useEffect in my component. My component looks like this:

import React from 'react';
import SplashScreen from 'react-native-splash-screen';
import WrapWithProvider from './WrapWithProvider';
import AppNavigator from './AppNavigator';
import {
NavigationContainer,
} from '@react-navigation/native';
export default function App() {
React.useEffect(() => {
setTimeout(() => {
SplashScreen.hide();
}, 3000)
}, []);

return (
<WrapWithProvider>
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
</WrapWithProvider>
);
}

I hope this helps.

Read more