使用 Jest 测试

使用 React Navigation 测试代码可能需要一些设置，因为我们需要模拟导航器中使用的原生依赖项。我们建议使用 Jest 来编写单元测试。

模拟原生模块

为了能够测试 React Navigation 组件，需要根据使用的组件类型模拟某些依赖项。

如果您使用的是 @react-navigation/drawer，则需要模拟

• react-native-reanimated
• react-native-gesture-handler

如果您使用的是 @react-navigation/stack，则只需要模拟

• react-native-gesture-handler

要添加模拟，请创建一个名为 jest/setup.js 的文件（或您选择的任何其他文件名），并将以下代码粘贴到其中

// include this line for mocking react-native-gesture-handler
import 'react-native-gesture-handler/jestSetup';

// include this section and the NativeAnimatedHelper section for mocking react-native-reanimated
jest.mock('react-native-reanimated', () => {
  const Reanimated = require('react-native-reanimated/mock');

  // The mock for `call` immediately calls the callback which is incorrect
  // So we override it with a no-op
  Reanimated.default.call = () => {};

  return Reanimated;
});

// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

然后我们需要在我们的 jest 配置中使用此设置文件。您可以将其添加到 jest.config.js 文件中的 setupFiles 选项或 package.json 中的 jest 键下

{
  "preset": "react-native",
  "setupFiles": ["<rootDir>/jest/setup.js"]
}

确保 setupFiles 中的文件路径正确。Jest 将在运行测试之前运行这些文件，因此它是放置全局模拟的最佳位置。

如果您没有使用 Jest，那么您需要根据您使用的测试框架模拟这些模块。

编写测试

我们建议使用 React Native Testing Library 以及 jest-native 来编写您的测试。

示例

import * as React from 'react';
import { screen, render, fireEvent } from '@testing-library/react-native';
import { NavigationContainer } from '@react-navigation/native';
import { RootNavigator } from './RootNavigator';

test('shows profile screen when View Profile is pressed', () => {
  render(
    <NavigationContainer>
      <RootNavigator />
    </NavigationContainer>
  );

  fireEvent.press(screen.getByText('View Profile'));

  expect(screen.getByText('My Profile')).toBeOnTheScreen();
});

最佳实践

在为使用 React Navigation 的组件编写测试时，需要牢记以下几点

1. 避免模拟 React Navigation。相反，在您的测试中使用真实的导航器。
2. 不要检查导航操作。相反，检查导航的结果，例如正在渲染的屏幕。