React Native 单元测试：使用 Enzyme 和 Jest 优化 UI 测试-JavaScript中文网-JavaScript教程资源分享门户

React Native 是一个非常流行的移动端开发框架，它提供了许多功能强大的组件和 API，使得开发者能够快速地构建出高质量的移动应用。但是，当应用规模逐渐变大时，如何保证应用的稳定性和质量就成为了一个重要的问题。而单元测试则是保证应用质量的一种重要手段。

在 React Native 的开发中，单元测试主要分为两大类：逻辑（业务）测试和 UI 测试。逻辑测试主要是对应用的业务逻辑进行测试，比如测试一个函数是否能够正常处理输入和输出。而 UI 测试则主要是对应用的 UI 组件进行测试，比如测试一个按钮的点击事件是否能够正常触发。

本文主要介绍如何使用 Enzyme 和 Jest 这两个工具来优化 React Native 应用的 UI 测试。

Enzyme

Enzyme 是一个 React 组件测试工具库，它提供了一种轻量级的 API，用于在自动化测试环境中轻松、自然地测试 React 组件。Enzyme 支持几乎全部的 React 组件 API，包括渲染、模拟交互、寻找组件、触发事件等。使用 Enzyme 可以极大地提高组件测试时的效率。

安装 Enzyme

首先，我们需要安装 Enzyme 和 Enzyme 适配器。在 React Native 应用目录下执行以下命令：

npm install --save-dev enzyme enzyme-adapter-react-16

其中，enzyme-adapter-react-16 是 Enzyme 的 React 16 版本适配器，如果你的应用使用了其他版本的 React，需要对应安装相应版本的适配器。

编写测试用例

在编写测试用例之前，我们需要先创建一个测试文件，比如 Button.test.js。在文件头部引入 React、Enzyme 和 Button 组件：

import React from 'react';
import { shallow } from 'enzyme';
import Button from './Button';

然后，我们可以使用 shallow 方法来创建一个 Button 组件实例，并通过断言判断其渲染结果是否符合预期，比如：

it('renders correctly', () => {
  const wrapper = shallow(<Button title="submit" onPress={() => {}} />);
  expect(wrapper).toMatchSnapshot();
});

上面的测试用例会将 Button 组件渲染为一个浅层次的组件树（只渲染 Button 组件本身，不渲染子组件），然后与预期的快照进行比较。如果两者一致，测试通过。

Jest

Jest 是 Facebook 开发的一个 JavaScript 单元测试工具，它旨在提供简单的配置、可扩展性和可预测的行为。Jest 支持对 JavaScript、TypeScript、React、Vue、Angular 等主流框架的单元测试。在 React Native 应用中使用 Jest 既可以进行逻辑测试、API 测试，也可以进行 UI 测试。

安装 Jest

在 React Native 应用目录下执行以下命令安装 Jest 和相关依赖：

npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

其中，babel-jest 是 Jest 的 Babel 转换器，@babel/preset-env 和 @babel/preset-react 是 Babel 的预设环境，react-test-renderer 是用于渲染 React 组件的测试工具。

配置 Jest

在应用根目录下创建一个 jest.config.js 文件，并添加以下配置：

module.exports = {
  preset: 'react-native',
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
  },
  testMatch: ['**/__tests__/**/*.test.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
  testEnvironment: 'node',
};

preset：表示使用 Jest 的预设环境，react-native 表示适用于 React Native 的预设环境。
transform：表示进行代码转换的方式，将所有 .js 和 .jsx 文件通过 babel-jest 进行转换。
testMatch：表示测试文件的匹配模式，本例中表示匹配所有 tests 目录下的 .test.js 和 .spec.js 文件，并匹配所有的 .test.jsx 和 .spec.jsx 文件。
testEnvironment：表示测试运行的环境，本例中表示运行在 Node.js 中。

编写测试用例

在 tests 目录下创建一个 Button.test.js 文件，并添加以下代码：

// javascriptcn.com 代码示例
import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import Button from '../Button';

it('renders correctly', () => {
  const tree = renderer.create(<Button title="submit" onPress={() => {}} />).toJSON();
  expect(tree).toMatchSnapshot();
});

上面的测试用例创建了一个 Button 组件实例，并通过 react-test-renderer 渲染为一个 JSON 树，然后将该树与预期的快照进行比较。如果两者一致，测试通过。

创建测试快照

Jest 提供了一个非常便捷的功能，可以将测试中的渲染结果与预期的快照进行比较。每次运行测试时，Jest 会自动为测试文件生成一个快照文件，并将该文件与实际渲染结果进行比较。如果两者一致，测试通过；如果不一致，Jest 会提示用户更新快照文件。

生成快照文件的方法非常简单，只需要在测试文件中使用 expect 方法将渲染结果与空对象（{}）进行比较即可：

expect(tree).toMatchSnapshot();

第一次运行测试时，Jest 会提示用户生成快照文件，此时只需要在终端输入 u 即可：

Snapshot Summary
 › 1 snapshot updated from 0 tests.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 updated, 1 total
Time:        1.919 s

下次运行测试时，Jest 会将渲染结果与快照文件进行比较，如果一致则测试通过，否则会提示用户更新快照文件。

总结

React Native 的 UI 测试非常重要，在组件数量和复杂度逐渐增加的情况下，使用 Enzyme 和 Jest 可以极大地提高测试效率，保障应用的质量和稳定性。同时，在编写测试用例时，我们也可以通过判断组件的 Props 和 State 来验证组件的行为是否符合预期。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652d45a77d4982a6ebea84df

React Native 单元测试：使用 Enzyme 和 Jest 优化 UI 测试

Enzyme

安装 Enzyme

编写测试用例

更多 Enzyme 测试方法

Jest

安装 Jest

配置 Jest

编写测试用例

创建测试快照

总结

纠错反馈