Version: 6.x

使用 Jest 进行测试

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

¥Testing code using React Navigation may require some setup since we need to mock native dependencies used in the navigators. We recommend using Jest to write unit tests.

模拟原生模块

¥Mocking native modules

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

¥To be able to test React Navigation components, certain dependencies will need to be mocked depending on which components are being used.

如果你使用 @react-navigation/drawer，则需要模拟：

¥If you're using @react-navigation/drawer, you will need to mock:

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

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

¥If you're using @react-navigation/stack, you will only need to mock:

react-native-gesture-handler

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

¥To add the mocks, create a file jest/setup.js (or any other file name of your choice) and paste the following code in it:

// 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 键下：

¥Then we need to use this setup file in our jest config. You can add it under setupFiles option in a jest.config.js file or the jest key in package.json:

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

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

¥Make sure that the path to the file in setupFiles is correct. Jest will run these files before running your tests, so it's the best place to put your global mocks.

如果你不使用 Jest，那么你需要根据你正在使用的测试框架来模拟这些模块。

¥If you're not using Jest, then you'll need to mock these modules according to the test framework you are using.

编写测试

¥Writing tests

我们建议使用 React Native 测试库和 jest-native 来编写测试。

¥We recommend using React Native Testing Library along with jest-native to write your tests.

示例：

¥Example:

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

最佳实践

¥Best practices

使用 React Navigation 为组件编写测试时需要记住以下几点：

¥There are a couple of things to keep in mind when writing tests for components using React Navigation:

避免模拟 React Navigation。相反，在测试中使用真正的导航器。

¥Avoid mocking React Navigation. Instead, use a real navigator in your tests.
不检查导航操作。相反，检查导航的结果，例如正在渲染的屏幕。

¥Don't check for navigation actions. Instead, check for the result of the navigation such as the screen being rendered.

模拟原生模块​

编写测试​

最佳实践​

模拟原生模块

编写测试

最佳实践