React native @5Navigation react testing library

Question

I am new to React Native Testing Library. For my React native app I am using styled components and Typescript. I fetched the data and pass to my flatList. In Flat-list's render item I have created one global component where it display all the data which is wrap with one touchable container. When user will click the that touchable opacity it will go to single product details screen.

For testing the component I have created one mock container. And I wrap my touchable opacity component. I followed this article to create mocked navigator. I want to test the touchable opacity component and it navigate to the next screen. But I am getting error and it says:

The action 'NAVIGATE' with payload {"name":"ProductDetails","params":{"product":{"__typename":"Product","id":"6414893391048","ean":"6414893391048","name":"T shirt","brandName":"Denim","price":13.79 }} was not handled by any navigator.

This my component

const navigation = useNavigation();
      
const onPress = () => {
    trackProductView({
        id: item.id ,
        name: item.name,
    });
    
    navigation.navigate(Routes.ProductDetails, { product: item });
};

return (
    <TouchableOpacity
        accessible={true}
        {...a11y({
            role: 'menuitem',
            label: item.name,
        })}
        onPress={onPress} // This is my onPress function
    >
        <ItemContainer>
            <ProductTitleText ellipsizeMode={'tail'} numberOfLines={2}>
                {item.name}
            </ProductTitleText>
            <QuantityModifierWrapper>
                <QuantityModifier item={item!} />
            </QuantityModifierWrapper>
        </ItemContainer>
    </TouchableOpacity>
);

This is my mocked container

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import 'react-native-gesture-handler';
import { MockedProvider } from '@apollo/client/testing';
    
type Props = {
    screen: any;
    params?: any;
};
    
const Stack = createStackNavigator();
const MockedNavigator = ({ screen, params = {} }: Props) => {
    return (
        <MockedProvider>
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen
                name='MockedScreen'
                component={screen}
                initialParams={params}
              />
            </Stack.Navigator>
          </NavigationContainer>
        </MockedProvider>
    );
};
    
export default MockedNavigator;

This is my mocked screen

import React from 'react';
import { View } from 'react-native';

type Props = {
    children: React.ReactNode;
};

const MockedScreen = ({ children }: Props) => {
    return <View>{children}</View>;
};
    
export default MockedScreen;

This is my test suite where I am getting failed test

import React from 'react';
import { fireEvent, render, cleanup } from 'skm/utils/testing_utils';
import Touchablecomponent from './Touchable';
import MockedNavigator from './MockNav';
import MockedScreen from './Mockscreen';
        
describe('<Touchablecomponent/> ', () => {
    test("render with invalid data", async () => {
        const screenName = 'ProductDetails';
        const component = (
          <MockedNavigator
            screen={() => (
              <MockedScreen>
                <ProductItemSmall item={mockData}  />
              </MockedScreen>
            )}
            // params={{data: mockData }}
          />
        );
        const { getByA11yRole, debug, toJSON  } = render(component);
        const item = getByA11yRole('menuitem');
        console.log(fireEvent.press(item));
    });
})