React Native Testing Library 快速入门指南

什么是 React Native Testing Library

React Native Testing Library (RNTL) 是一个专门为 React Native 应用设计的测试工具库，它提供了一套简单直观的 API 来测试 React Native 组件。与传统的测试方法不同，RNTL 鼓励开发者从用户角度出发进行测试，而不是过度关注实现细节。

安装步骤

基础安装

在你的 React Native 项目根目录下，执行以下命令安装 RNTL：

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

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

重要依赖说明

RNTL 需要 react-test-renderer 作为对等依赖项。请确保你安装的 react-test-renderer 版本与项目中 react 的版本完全匹配。版本不匹配可能会导致各种难以排查的问题。

自动配置的 Jest 匹配器

RNTL v13 版本会自动扩展 Jest，添加 React Native 特有的匹配器。这意味着你无需额外配置，只需在测试文件中导入 @testing-library/react-native 的任何内容（比如 render 函数），就能使用这些增强的匹配器。

这些匹配器包括但不限于：

• toBeDisabled() - 检查元素是否被禁用
• toBeEnabled() - 检查元素是否可用
• toHaveTextContent() - 检查元素是否包含特定文本

推荐配置 ESLint 插件

为了帮助你遵循最佳实践并避免常见错误，强烈推荐安装 eslint-plugin-testing-library 插件。

安装 ESLint 插件

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

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

配置 ESLint

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

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

这个配置会确保 ESLint 只在测试文件中应用 Testing Library 的规则，而不会影响你的生产代码。

为什么选择 React Native Testing Library

1. 用户视角测试：鼓励从用户角度测试组件，而不是测试实现细节
2. 简单易用：API 设计直观，学习曲线平缓
3. 社区支持：作为 Testing Library 生态系统的一部分，有活跃的社区支持
4. 与 React Native 深度集成：专门为 React Native 设计，理解其特有的行为和组件

下一步

安装完成后，你就可以开始编写你的第一个测试了。典型的测试流程包括：

1. 使用 render 函数渲染组件
2. 使用查询方法查找元素
3. 进行断言验证组件行为

记住，好的测试应该关注"组件做了什么"而不是"组件如何实现的"，这正是 React Native Testing Library 的设计哲学。