React Native函数组件测试：Jest、Enzyme与Mocha的区别及选型建议

1. 定位本质不同 #

• Jest：Facebook推出的一站式测试工具集，集成了测试运行器、断言库、Mock工具、代码覆盖率统计功能，开箱即用。天生适配React/React Native生态，自动Mock RN原生模块（如Alert、StyleSheet），无需额外配置就能启动测试。
• Mocha：轻量灵活的测试用例执行器，仅负责运行测试代码，本身不带断言、Mock能力，需搭配Chai（断言）、Sinon（Mock）、Istanbul（覆盖率）等第三方库使用。优势是自由度极高，能适配任意技术栈，适合需要自定义测试流程的场景。
• Enzyme：Airbnb开发的React专属测试工具，并非独立测试运行器，必须搭配Jest或Mocha使用。提供简洁API用于查询组件DOM结构、模拟用户交互（如shallow浅渲染、mount全渲染），专注于React组件的细节测试。

2. 上手与配置成本 #

• Jest：几乎零配置，默认支持ES6/JSX语法，自动处理模块Mock，React/RN项目可直接接入，新手友好。
• Mocha：需手动编写测试脚本、安装依赖库，配置流程繁琐，但可完全自定义测试逻辑。
• Enzyme：需搭配测试运行器使用，还要安装对应React版本的适配器（如enzyme-adapter-react-17），配置成本高于Jest，但聚焦React组件测试场景。

3. 适用场景 #

• Jest：React/React Native项目首选，适合快速搭建测试环境、不想在配置上消耗精力的团队，可覆盖单元测试、集成测试。
• Mocha：适合多技术栈混合项目或Node.js后端测试，需要高度自定义测试流程时优先选择。
• Enzyme：更适合Web端React组件的DOM层面测试（如验证渲染结构、交互逻辑），但对React Native支持有限，多数Web端API无法直接在RN中使用。

对于RN函数组件，优先推荐**Jest + React Testing Library (RTL)**的组合，理由如下：

1. 完美适配RN生态 #

Jest是React Native官方指定的测试框架，内置对RN原生模块的自动Mock，无需手动编写Mock代码。RTL提供专属的@testing-library/react-native包，针对RN组件（如TouchableOpacity、Text）做了深度适配，所有查询、交互方法均从用户实际使用角度设计（如getByText查找文本、fireEvent.press模拟点击），贴合RN测试场景。

2. 比Enzyme更适配函数组件 #

Enzyme对RN的支持一直不完善，大量Web端API（如simulate）无法在RN中使用，需额外适配。而RTL专注于测试组件的实际行为而非内部实现，特别适合测试函数组件与Hook（如useState、useEffect），不会因组件内部逻辑调整导致测试用例失效，维护成本更低。

3. 简单测试示例 #

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import { render, fireEvent } from '@testing-library/react-native';

const Counter = () => {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <Text testID="count-display">{count}</Text>
      <TouchableOpacity testID="increment-btn" onPress={() => setCount(count + 1)}>
        <Text>加1</Text>
      </TouchableOpacity>
    </>
  );
};

test('点击按钮后计数加1', () => {
  const { getByTestId } = render(<Counter />);
  const countDisplay = getByTestId('count-display');
  const incrementBtn = getByTestId('increment-btn');

  expect(countDisplay.props.children).toBe(0);
  fireEvent.press(incrementBtn);
  expect(countDisplay.props.children).toBe(1);
});

补充：已有Enzyme测试用例的兼容方案 #

若项目已存在大量Enzyme测试用例，可通过enzyme-adapter-react-native继续兼容，但建议逐步迁移至RTL——RTL更符合现代React组件的测试最佳实践，尤其针对函数组件与Hook的测试场景，长期维护性更强。

内容的提问来源于stack exchange，提问作者Shyam Sundar