我如何在 Jest 中从 @react-navigation/bottom-tabs 模拟 createBottomTabNavigator

Question

我似乎无法使用 Jest 测试我的底部导航器。

这是我的导航器：

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 (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          keyboardHidesTabBar: true,
        }}>
        <Tab.Screen
          name="Home"
          component={HomeNavigator}
          options={{
            tabBarLabel: 'Home',
            tabBarIcon: ({color, size}) => (
              <Icon name="home" color={color} size={size} />
            ),
          }}
        />
        <Tab.Screen
          name="Search"
          component={SearchNavigator}
          options={{
            tabBarLabel: 'Search',
            tabBarIcon: ({color, size}) => (
              <IonIcon
                name="search"
                color={color}
                size={size}
                style={{transform: [{scaleX: -1}]}}
              />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

navigation/index.js

我的 redux 包装器组件的渲染函数：

<Provider store={global.store}>
  <PersistGate loading={null} persistor={global.persistor}>
    {this.props.children}
  </PersistGate>
</Provider>

redux_wrapper.js

我的navigator.test.js

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', () => {
  test('page contains the header and 10 items', async () => {
    const component = (
      <ReduxWrapper>
        <NavigationContainer>
          <HomeNavigator />
        </NavigationContainer>
      </ReduxWrapper>
    );

    const {getAllByTestId} = render(component);

    const homeScene = getAllByTestId('homeScene');

    expect(homeScene).toBeTruthy();
  });
});

navigator.test.js

当我尝试运行它时，我从 Jest 得到以下错误：

我知道我在这里的主要目的是稍后测试到详细信息屏幕的导航，我怎样才能正确测试它？

Answer 1

getByTestID 函数查看渲染组件的 testID= 属性。

您还没有分享 HomeNavigator 的代码，但如果您将其更改为：

// './routes/home'
    <View testID="homeScene">
      { /* rest of the HomeNavigator code */ }
    </View>

您可能还需要在 <Tab.Navigator JSX 中设置 initialRouteName 属性。

      <Tab.Navigator
        initialRouteName="Home"
        tabBarOptions={{
          keyboardHidesTabBar: true,
        }}>
        <Tab.Screen
        ...
      </Tab.Navigator>

我如何在 Jest 中从 @react-navigation/bottom-tabs 模拟 createBottomTabNavigator

how can i mock createBottomTabNavigator from @react-navigation/bottom-tabs in Jest

react-native

jestjs

react-navigation-bottom-tab