React native 如何从@react navigation/bottom tabs中模拟CreateBoottomTabNavigator

我似乎无法用玩笑来测试我的底部导航器

这是我的导航器：

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>
  );
}

import*as React from'React'；
导入“反应本机手势处理程序”；
从“反应本机矢量图标/FontAwesome”导入图标；
从“react native vector icons/Octicons”导入IonIcon；
从'@react-navigation/native'导入{NavigationContainer}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
从“/routes/home”导入HomeNavigator；
从“./routes/search”导入SearchNavigator；
导出默认函数导航器（）{
const Tab=createBottomTabNavigator（）；
返回(
(
),
}}
/>
(
),
}}
/>
);
}

导航/index.js

我的redux包装器组件的呈现函数：

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

{this.props.children}

redux_wrapper.js

My 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();
  });
});

import*as React from'React'；
从'@react-navigation/native'导入{NavigationContainer}；
从'@testing library/react native'导入{render，firevent}；
从“../src/redux/redux_wrapper”导入ReduxWrapper；
从“../src/navigation/routes/home”导入HomeNavigator；
jest.mock（'react-native/Libraries/Animated/NativeAnimatedHelper'）；
描述（'测试反应导航'，（）=>{
测试（'页面包含标题和10项'，异步（）=>{
常数分量=(
);
const{getAllByTestId}=render（组件）；
const homese=getAllByTestId（“homese”）；
expect（homeScene.toBeTruthy（）；
});
});

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();
  });
});

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

---

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

函数查看呈现组件的

testID=

属性

您尚未共享

HomeNavigator

的代码，但如果您将其更改为以下内容：

/'./路线/家'
{/*HomeNavigator代码的其余部分*/}

---

您可能还需要在

中设置
initialRouteName
属性，谢谢，这样做了。事实上，我通过的测试中有一个拼写错误。