react-native - React Native @5Navigation 反应测试库

Question

我是 React Native 测试库的新手。对于我的 React 本机应用程序，我使用样式化组件和 Typescript。我获取数据并传递给我的 flatList。在 Flat-list 的渲染项中，我创建了一个全局组件，其中显示了所有数据，这些数据用一个可触摸的容器包装。当用户单击该可触摸的不透明度时，它将转到单个产品详细信息屏幕。

为了测试组件，我创建了一个模拟容器。我包装了我的可触摸不透明度组件。我按照这篇文章创建了模拟导航器。我想测试可触摸的不透明度组件并导航到下一个屏幕。但我收到错误，它说：

带有有效负载 {"name":"ProductDetails","params":{"product":{"__typename":"Product","id":"6414893391048","ean":"6414893391048", "name":"T shirt","brandName":"Denim","price":13.79 }} 未被任何导航器处理。

这是我的组件

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

这是我的模拟容器

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;

这是我的模拟屏幕

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;

这是我的测试套件，我的测试失败了

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

标签： react-nativereact-testing-libraryreact-native-testing-library