2

我正在寻找使用 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 组件。这会是我所有屏幕的 mockedNavigator 组件吗？这是可重复使用的吗？

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 无法访问某些道具。

4

0 回答 0