Enzyme 是一个基于 React 的测试实用工具，旨在使测试 React Native 组件变得更加简单，直观和有趣。本文将介绍 Enzyme 的基本概念和如何使用它进行 React Native 组件的单元测试。
Enzyme 基本概念
Enzyme 是由 AirBnb 开发的用于 React Native 组件测试的实用工具。Enzyme 的主要作用是提供一个友好且直观的 API，用来操作你的 React 组件。它有三种渲染器：
- Shallow rendering（浅渲染） 仅仅是渲染了组件的第一层，不去渲染子组件，以此来提供测试性能。
- Full DOM rendering（全渲染） 在一个类似于浏览器的环境中渲染组件。它的目的是测试组件的 DOM 行为和交互事件。
- Static rendering（静态渲染） 仅仅是渲染组件到一个静态的 HTML 字符串中。它的目的是用于和服务端渲染一起使用。
通过这三种渲染模式 Enzyme 提供了一些常用的 API:
- find() 通过选择器查找指定元素，返回一个数组
- simulate() 模拟交互事件，比如 click、change、blur、focus 等
- exists() 检测是否存在指定组件
- setState() 设置组件的 state
- props() 获取组件的 props
如何使用 Enzyme 进行 React Native 组件的单元测试
1. 安装 Enzyme
首先需要在项目中安装 Enzyme：
npm install --save-dev enzyme
以及对应的 adapter 包：
npm install --save-dev enzyme-adapter-react-16
2. 配置 Enzyme
在项目中的测试文件中，需要先进行 Enzyme 的配置。我们需要创建 setupTests.js 文件，引入 Enzyme 和其对应的 Adapter：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });3. 创建测试用例
假设我们有一个计数器的组件，如下：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ----- ---------------- - ---- ---------------
----- ------- - -- -- -
----- ------- --------- - ------------
----- -------------- - -- -- -
-------------- - ---
--
------ -
------
----- --------------------------------
----------------- -------------------- -------------------------
---------------
-------------------
-------
--
--
------ ------- --------我们可以通过 Enzyme 来测试该组件。首先我们需要引入相应的函数和组件：
import React from 'react';
import { shallow } from 'enzyme';
import Counter from '../Counter';
import { TouchableOpacity, Text } from 'react-native';shallow 函数用于浅渲染组件， Counter 是需要进行测试的组件，TouchableOpacity 和 Text 是 Counter 组件中的两个子组件。
接下来我们根据测试需求编写测试用例：
-- -------------------- ---- -------
------------------ ---- -- -- -
----------- ----------- -- -- -
----- ------- - ---------------- ----
----------------------------------
---
----------- ----- -- --- -- -- -
----- ------- - ---------------- ----
----- ----- - ------------------------------------------------------
--------------------------------
---
------------ ----------- -- -- -
----- ------- - ---------------- ----
----- -------- - ---------------------------------------
---------------------------
----- ----- - ------------------------------------------------------
--------------------------------
---
---其中，initial state is 0 测试了组件的状态初始值是否为 0；increase correctly 测试了点击按钮是否能正确增加计数器的值。
4. 执行测试
在 package.json 文件中添加测试指令："test": "react-native-scripts test" 。
然后在终端输入 npm test 即可执行测试。
总结
通过 Enzyme 的浅渲染、全渲染和静态渲染三种方式，开发者可以更加简单、直观、高效地测试 React Native 组件。Enzyme 不仅提供了方便的 API，还整合了 Jest、Chai 等其他测试框架，可以帮助开发者更加专注于业务逻辑而不是测试代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a8c6e148841e9894527610