React Native 自动化测试终极指南:从零开始到持续集成

写在前面:为什么你的 React Native 应用需要自动化测试?

想象一下:你刚发布了一个新版本,用户反馈登录页面崩溃了。你紧急修复,重新打包,App Store 审核等了 3 天,终于上线——结果另一个隐藏 Bug 又炸了……

如果能提前发现这些问题呢?

自动化测试就是你的“代码保镖”,它能在你提交代码时自动检查逻辑错误、UI 错位、性能问题,甚至模拟用户操作,确保每次改动不会破坏已有功能。

本篇将带你从 单元测试E2E 测试,再到 CI/CD 集成,构建一个坚如磐石的 React Native 测试体系。


1. React Native 测试金字塔:该测什么?怎么测?

测试策略遵循经典的 测试金字塔(Test Pyramid):

  1. 单元测试(Unit Tests) - 测试独立函数、工具类
  2. 组件测试(Component Tests) - 测试 React 组件渲染 & 交互
  3. 集成测试(Integration Tests) - 测试多个组件协作
  4. 端到端测试(E2E Tests) - 模拟真实用户操作

黄金法则

  • 底层测试(单元/组件)要快、多、稳定(80% 覆盖率)
  • 高层测试(E2E)要少而精(核心业务流程)

2. 单元测试:Jest + React Testing Library

(1)配置 Jest

React Native 默认支持 Jest,只需在 package.json 中配置:

{
   
   
  "jest": {
   
   
    "preset": "react-native",
    "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"]
  }
}

(2)测试工具函数

假设有一个 utils.js

export const sum = (a, b) => a + b;

测试文件 utils.test.js

import {
   
    sum } from './utils';

test('adds 1 + 2 to equal 3', () => {
   
   
  expect(sum(1, 2)).toBe(3);
});

运行测试:

npm test

(3)测试 React 组件

安装依赖:

npm install @testing-library/react-native

测试一个 Button 组件:

import {
   
    render, fireEvent } from '@testing-library/react-native';
import Button from '../Button';

你可能感兴趣的:(测试,react,native,react.js,集成测试,单元测试,测试工具)