This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

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

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))"
  ]
}

"jest": {
  "preset": "jest-expo",
  "transformIgnorePatterns": [
    "node_modules/(?!(.bun|(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', async () => {
    const { getByText } = await 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', async () => {
    const tree = (await 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 选项。

其他信息