React Native Testing Library 快速入门指南

什么是 React Native Testing Library

React Native Testing Library 是一个专门为 React Native 应用设计的测试工具库，它提供了一套简洁的 API 来帮助开发者编写更贴近用户视角的测试用例。与传统的单元测试不同，它鼓励开发者从用户交互的角度出发，而不是过度关注实现细节。

安装步骤

1. 安装核心库

在项目根目录下执行以下命令之一安装核心测试库：

# 使用 yarn
yarn add -D @testing-library/react-native

# 使用 npm
npm install -D @testing-library/react-native

2. 确保依赖版本匹配

这个库需要 react-test-renderer 作为 peer 依赖，请确保你安装的 react-test-renderer 版本与项目中的 react 版本完全一致。

配置 Jest 匹配器

React Native Testing Library 提供了一些专为 React Native 设计的 Jest 匹配器（matchers），可以更直观地断言组件行为。要启用这些匹配器，需要在 Jest 配置文件中进行设置：

1. 创建或编辑 jest-setup.ts 文件
2. 添加以下内容：

import '@testing-library/react-native/extend-expect';

3. 确保 Jest 配置中设置了 setupFilesAfterEnv 指向这个文件

配置 ESLint 插件

为了帮助开发者遵循最佳实践并避免常见错误，建议安装并配置 ESLint 插件：

1. 安装插件

# 使用 yarn
yarn add -D eslint-plugin-testing-library

# 使用 npm
npm install -D eslint-plugin-testing-library

2. 配置 ESLint

在项目的 ESLint 配置文件（如 .eslintrc.js）中添加以下配置：

module.exports = {
  overrides: [
    {
      // 仅对测试文件生效
      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
      extends: ['plugin:testing-library/react'],
    },
  ],
};

为什么这样配置

1. 版本匹配要求：React 生态系统对版本一致性要求严格，特别是测试相关包，版本不匹配可能导致意外行为。

2. Jest 匹配器：扩展的匹配器提供了更语义化的断言方式，例如：

   • toBeOnTheScreen() - 检查元素是否在屏幕上
   • toHaveTextContent() - 检查文本内容
   • toBeDisabled() - 检查禁用状态

3. ESLint 配置：

   • 使用 overrides 确保规则只应用于测试文件
   • testing-library/react 预设包含了许多有用的规则，如：
     • 避免使用容器查询
     • 确保等待操作正确使用
     • 优先使用用户事件而非直接属性操作

最佳实践建议

1. 测试文件组织：建议将测试文件放在与被测组件同级的 __tests__ 目录中，或使用 .test.js/.spec.js 后缀。

2. 测试编写原则：

   • 测试用户能感知的行为，而非实现细节
   • 优先使用用户事件 API 模拟用户交互
   • 避免过度测试内部状态

3. 调试技巧：测试失败时，可以使用 debug() 方法输出组件渲染结果，帮助定位问题。

通过以上配置，你就为 React Native 项目建立了一个强大的测试基础架构，可以开始编写高质量、可维护的测试用例了。