invalid value for 'component' prop It must be a valid React Component

[alakdam07]

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. I want to test the touchable opacity component.

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. But when I tried to test this suite I got this error: Got an invalid value for 'component' prop for the screen 'MockedScreen'. It must be a valid React Component. I don't know what I am making mistake.

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', () => {
    const component = (
      <MockedNavigator
        screen={
          <MockedScreen>
            <Touchablecomponent />
          </MockedScreen>
        }
      />
    );
    const {toJSON} = render(component);
    expect(toJSON()).toMatchSnapshot();

  });
})

[maksudkhan7706]

check the following

export default HomePage