React Native 是 Facebook 开源的一个基于 React 的移动端应用开发框架，开发者可以使用类似于 React 开发 Web 应用的方式来创建原生应用。在使用 React Native 进行开发的过程中，单元测试是必不可少的一部分。Enzyme 是一个 React 单元测试框架，在 React Native 中也得到了广泛应用。本文将介绍如何在 React Native 中使用 Enzyme 进行单元测试。
1. 搭建 React Native 环境
参考 React Native 官网的文档，搭建 React Native 的开发环境。
安装 Node 和 npm 后，通过以下命令全局安装 React Native CLI。
npm install -g react-native-cli
安装成功后，使用以下命令创建一个新的 React Native 项目。
react-native init MyProject
执行上述命令后，将在当前目录下创建一个名为 MyProject 的项目。我们可以使用以下命令运行该项目。
cd MyProject react-native run-ios
运行成功后，将看到一个默认的启动界面。
2. 安装 Enzyme
在安装 Enzyme 之前，需要在项目中安装一到两个 Babel 插件。
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs babel-jest
接下来安装 Enzyme 以及对应的 Adapter。
npm install --save-dev enzyme enzyme-adapter-react-16
以上便是 Enzyme 的基本安装。
3. 编写单元测试
接下来，我们将编写一些简单的单元测试来熟悉 Enzyme 的使用。首先，创建一个名为 test.js 的文件。在该文件中引入 React Native 的核心模块和 Enzyme 相关模块。
import React from 'react'; import { Text, View } from 'react-native'; import { shallow } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import renderer from 'react-test-renderer';
接下来，配置 Enzyme 的适配器。
Enzyme.configure({ adapter: new Adapter() });
我们将编写两个测试用例，一个测试用例使用 React Native 自带的测试框架，另一个使用 Enzyme 测试框架。
首先是 React Native 测试框架的测试用例。在该测试用例中，我们将测试一个简单的组件。
import React from 'react'; import { Text } from 'react-native'; import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer.create(<Text>Hello</Text>).toJSON(); expect(tree).toMatchSnapshot(); });
在以上测试用例中，我们使用了 React Native 自带的测试框架的 renderer 模块创建了一个简单的组件，并将其输出为一个 JSON 对象。然后使用 Jest 中的 expect 函数断言该 JSON 对象与我们预先编写的快照是否一致。
接下来是 Enzyme 测试框架的测试用例。在该测试用例中，我们将测试一个含有子组件的组件。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ----- ---- - ---- --------------- ------ - ------- - ---- --------- ----------- ----- ------------ -- -- - ----- ------- - -------- ------ ----------- ------------- ------- -- ------------------------------------------ ---展开代码
在以上测试用例中，我们引入了 Enzyme 的 shallow 方法，来对一个简单的视图进行单元测试。我们对组件内的子组件进行了数量判断。
4. 运行单元测试
在编写完测试用例后，我们可以使用 Jest 运行这些测试用例。在项目目录下，运行以下命令。
npm testJest 将会对项目中所有以 .test.js 或 .spec.js 结尾的测试用例进行测试，并输出测试结果。
5. 结语
本文介绍了如何在 React Native 中使用 Enzyme 进行单元测试。在开发 React Native 应用时，单元测试是非常重要的一环，能够有效提升应用的可靠性和健壮性，同时节省调试时间。Enzyme 是 React 生态中使用广泛的单元测试框架，可以极大地方便我们进行单元测试的编写和执行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d7c754a941bf7134dee311
