使用 Jest 进行单元测试

了解如何设置和配置 jest-expo 库，以使用 Jest 为项目编写单元测试和快照测试。

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

Jest 是使用最广泛的 JavaScript 单元测试和快照测试框架。在本指南中，你将学习如何在项目中设置 Jest、编写单元测试、编写快照测试，以及在 React Native 中使用 Jest 时组织测试的最佳实践。

你还将使用 jest-expo 库，它是一个 Jest 预设，用于模拟 Expo SDK 的原生部分，并处理 Expo 项目所需的大部分配置。

安装和配置

创建 Expo 项目后，请按照以下说明在项目中安装并配置 jest-expo：

{
  "compilerOptions": {
    "types": ["jest"]
  }
}

{
  "scripts": {
    "test": "jest --watchAll"
    %%placeholder-start%%... %%placeholder-end%%},
  "jest": {
    "preset": "jest-expo"
  }
}

{
  "jest": {
    "preset": "jest-expo"
  }
}

"jest": {
  "preset": "jest-expo",
  "transformIgnorePatterns": [
    "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg)"
  ]
}

"jest": {
  "preset": "jest-expo",
  "transformIgnorePatterns": [
    "node_modules/(?!(?:.pnpm/)?((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg))"
  ]
}

安装 React Native Testing Library

React Native Testing Library (@testing-library/react-native) 是一个用于测试 React Native 组件的轻量级方案。它提供实用函数，并与 Jest 配合使用。

要安装它，请运行以下命令：

警告 已弃用: @testing-library/react-native 取代了已弃用的 react-test-renderer，因为 react-test-renderer 不支持 React 19 及以上版本。如果你当前正在使用它，请将该已弃用库从项目中移除。更多信息请参阅 React 文档。

单元测试

单元测试用于检查最小的代码单元，通常是一个函数。要编写你的第一个单元测试，请看下面的示例：

import { PropsWithChildren } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export const CustomText = ({ children }: PropsWithChildren) => <Text>{children}</Text>;

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <CustomText>欢迎！</CustomText>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

import { render } from '@testing-library/react-native';

import HomeScreen, { CustomText } from '@/app/index';

describe('<HomeScreen />', () => {
  test('Text renders correctly on HomeScreen', () => {
    const { getByText } = render(<HomeScreen />);

    getByText('Welcome!');
  });
});

组织测试结构

整理测试文件很重要，这样更便于维护。一个常见模式是创建一个 tests 目录，并将所有测试放在其中。

下面展示了一个与 components 目录并列的测试结构示例：

或者，你也可以为项目的不同区域设置多个 tests 子目录。例如，为 components 单独创建一个测试目录，等等：

这完全取决于你的偏好，由你来决定如何组织项目目录。

快照测试

信息 **注意：**对于 UI 测试，我们建议使用端到端测试而不是快照单元测试。请参阅使用 Maestro 的 E2E 测试 指南。

快照测试 用于确保 UI 保持一致，尤其是在项目使用可能在各组件之间共享的全局样式时。

要为 <HomeScreen /> 添加快照测试，请在 home-screen-test.tsx 中的 describe() 内添加以下代码片段：

describe('<HomeScreen />', () => {
  %%placeholder-start%%... %%placeholder-end%%

  test('CustomText renders correctly', () => {
    const tree = render(<CustomText>Some text</CustomText>).toJSON();

    expect(tree).toMatchSnapshot();
  });
});

运行 npm run test 命令后，你会看到在 tests\snapshots 目录中创建了一个快照，并且有两个测试通过。

代码覆盖率报告

代码覆盖率报告可以帮助你了解有多少代码得到了测试。要以 HTML 格式查看项目中的代码覆盖率报告，请在 package.json 的 jest 下将 collectCoverage 设置为 true，并使用 collectCoverageFrom 指定在收集覆盖率时要忽略的文件列表。

"jest": {
  ...
  "collectCoverage": true,
  "collectCoverageFrom": [
    "**/*.{ts,tsx,js,jsx}",
    "!**/coverage/**",
    "!**/node_modules/**",
    "!**/babel.config.js",
    "!**/expo-env.d.ts",
    "!**/.expo/**"
  ]
}

运行 npm run test。你会看到项目中创建了一个 coverage 目录。找到 lcov-report/index.html 并在浏览器中打开它以查看覆盖率报告。

通常，我们不建议将 index.html 文件上传到 git。请在 .gitignore 文件中添加 coverage/**/* 以防止它被跟踪。

Jest 流程（可选）

你也可以使用不同的流程来运行测试。下面是一些你可以尝试的示例脚本：

"scripts": {
  "test": "jest --watch --coverage=false --changedSince=origin/main",
  "testDebug": "jest -o --watch --coverage=false",
  "testFinal": "jest",
  "updateSnapshots": "jest -u --coverage=false"
  %%placeholder-start%%... %%placeholder-end%%
}

更多信息请参阅 Jest 文档中的 CLI 选项。

其他信息