title: how can i mock createBottomTabNavigator from @react-navigation/bottom-tabs in Jest
body: <p>I can't seem to be able to test my bottom navigator with Jest.</p>
  <p>here's my navigator :</p>
  <pre><code>import * as React from 'react';
  import 'react-native-gesture-handler';
  import Icon from 'react-native-vector-icons/FontAwesome';
  import IonIcon from 'react-native-vector-icons/Octicons';
  import {NavigationContainer} from '@react-navigation/native';
  import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
  
  import HomeNavigator from './routes/home';
  import SearchNavigator from './routes/search';
  
  export default function Navigator() {
    const Tab = createBottomTabNavigator();
  
    return (
      &lt;NavigationContainer&gt;
        &lt;Tab.Navigator
          tabBarOptions={{
            keyboardHidesTabBar: true,
          }}&gt;
          &lt;Tab.Screen
            name=&quot;Home&quot;
            component={HomeNavigator}
            options={{
              tabBarLabel: 'Home',
              tabBarIcon: ({color, size}) =&gt; (
                &lt;Icon name=&quot;home&quot; color={color} size={size} /&gt;
              ),
            }}
          /&gt;
          &lt;Tab.Screen
            name=&quot;Search&quot;
            component={SearchNavigator}
            options={{
              tabBarLabel: 'Search',
              tabBarIcon: ({color, size}) =&gt; (
                &lt;IonIcon
                  name=&quot;search&quot;
                  color={color}
                  size={size}
                  style={{transform: [{scaleX: -1}]}}
                /&gt;
              ),
            }}
          /&gt;
        &lt;/Tab.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  </code></pre>
  <p><em>navigation/index.js</em></p>
  <p>my redux wrapper component's render function:</p>
  <pre><code>&lt;Provider store={global.store}&gt;
    &lt;PersistGate loading={null} persistor={global.persistor}&gt;
      {this.props.children}
    &lt;/PersistGate&gt;
  &lt;/Provider&gt;
  </code></pre>
  <p><em>redux_wrapper.js</em></p>
  <p>My navigator.test.js</p>
  <pre><code>import * as React from 'react';
  import {NavigationContainer} from '@react-navigation/native';
  import {render, fireEvent} from '@testing-library/react-native';
  import ReduxWrapper from '../src/redux/redux_wrapper';
  
  import HomeNavigator from '../src/navigation/routes/home';
  
  jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
  
  describe('Testing react navigation', () =&gt; {
    test('page contains the header and 10 items', async () =&gt; {
      const component = (
        &lt;ReduxWrapper&gt;
          &lt;NavigationContainer&gt;
            &lt;HomeNavigator /&gt;
          &lt;/NavigationContainer&gt;
        &lt;/ReduxWrapper&gt;
      );
  
      const {getAllByTestId} = render(component);
  
      const homeScene = getAllByTestId('homeScene');
  
      expect(homeScene).toBeTruthy();
    });
  });
  </code></pre>
  <p><em>navigator.test.js</em></p>
  <p>when i try to run it , i get the following error from <strong>Jest</strong>:
  <a href="https://i.stack.imgur.com/8XCHk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8XCHk.png" alt="enter image description here" /></a></p>
  <p>how can i test this correctly , knowing that my main intention here is to test the navigation to a details screen later on ?</p>