React native testing: ForwardRef (NavigationContainer) inside a test was not wrapped in act (…)

[alakdam07]

I am practicing react-native testing library. I want to test my component, to check whether it render properly. My component has navigation. For reason I have made one mock-navigator, by following this article. My test passed and rendered the component correctly. But I am getting waring in my terminal : Warning: An update to ForwardRef(NavigationContainer) inside a test was not wrapped in act(...).. I wrapped the whole test in act but still I am getting the warning. I just don't know how to stop this warning. This is the image of warnings.
Really appreciate if some one help me out.

This is my mock navigator

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import 'react-native-gesture-handler';


type Props = {
  screen: any;
  params?: any;
};

const Stack = createStackNavigator();
const MockedNavigator = ({ screen, params = {} }: Props) => {
  return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name='MockedScreen'
            component={screen}
            initialParams={params}
          />
        </Stack.Navigator>
      </NavigationContainer>
  );
};

export default MockedNavigator;

This is my test suite where I am getting the warning

describe('<Mycomponent/> render ', () => {
  afterEach(cleanup);

  act(() => { // I wrap my test with `act`
    test('render valid data', () => {
      const component = (
        <MockedNavigator
          screen={() => (
            <MockedScreen>
              <Mycomponent />
            </MockedScreen>
          )}
        />
      );

      const { getByTestId } = render(component);

      const headerText = getByTestId('header');
      expect(headerText).toBeTruthy();
    });
  });
});

[thymikee]

This is not the way to use act. It's intended to be used when certain actions are performed, and wrapping those actions. However. RNTL wraps render and other calls with act by default. I guess the problem lies with animations which are async and finish after the test runs. You can configure the navigator to not use animations. Or you can mock Animated helpers (see: https://github.com/callstack/react-native-testing-library/blob/master/examples/reactnavigation/jest-setup.js). Anyway, there's not much we can do on the library level.

[alakdam07]

Could you please show me code how I can implement the mock Animated helpers