使用react-navigation v5测试react-native-testing-library

问题描述

我正在尝试使用react-native-testing-library测试react-navigation v5。该文档说要执行以下操作。

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { render,fireEvent } from '@testing-library/react-native';

describe('Testing react navigation',() => {
  test('page contains the header and 10 items',async () => {
    const component = (
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
    );

    const { findByText,findAllByText } = render(component);

    const header = await findByText('List of numbers from 1 to 20');
    const items = await findAllByText(/Item number/);

    expect(header).toBeTruthy();
    expect(items.length).toBe(10);
  });

 });

https://callstack.github.io/react-native-testing-library/docs/react-navigation

https://medium.com/@dariaruckaolszaska/testing-your-react-navigation-5-hooks-b8b8f745e5b6

这篇中篇文章建议我创建一个Mockednavigator组件。这将是我所有屏幕的嘲笑的Navigator组件吗？这可重用吗？

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();
const Mockednavigator = ({component,params = {}}) => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="MockedScreen"
          component={component}
          initialParams={params}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Mockednavigator;

我正在寻找的答案是。我是要在所有单元测试中使用真正的AppNavigator组件，还是要使用MockedAppNavigator？ 此外，我该如何传递道具？

文档尚不清楚，我正在寻求澄清。我们正在使用的许多新组件都使用了钩子，而react-navigation-v5无法访问某些道具。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）