在前端开发中，测试是非常重要的一环。在 React Native 开发中，我们经常需要对组件进行测试。而 Enzyme 是一个非常好用的 React 组件测试工具库，它支持浅渲染和完全渲染方式对 React 组件进行测试，使得测试变得简单易行。
Enzyme 简介
Enzyme 是 Airbnb 开源的 React 组件测试工具库，它提供了一套 API，使得 React 组件的测试变得简单易行。Enzyme 支持以下几种方式的组件测试：
- 静态渲染（shallow）：仅仅渲染了被测试组件的一层，非常适用于测试组件（单元测试）的某一个方法或属性。
- 完全渲染（mount）：将被测试组件挂载到 DOM 中，完全渲染所涉及的组件及其子组件，适用于功能测试、交互测试，它模拟了你的组件在浏览器环境下真实的一整套交互行为。
- 静态渲染的变种（render）：渲染组件并生成 HTML，但不渲染子组件，适用于快照测试，它可以与 React 16 的快照测试非常好地搭配使用。
Enzyme 的安装
使用 Enzyme 需要先安装其本身，以及 React 和 React DOM 的适当版本。安装命令如下：
npm install --save-dev enzyme react-test-renderer enzyme-adapter-react-16
其中，enzyme 是 Enzyme 的核心依赖，react-test-renderer 是 React 的一个内置测试工具，enzyme-adapter-react-16 是适用于 React 16 的适配器。请注意，如果你正在使用 React Native，那么你需要使用enzyme-adapter-react-native适配器。
Enzyme 对 React Native 组件的测试
静态渲染（shallow）
下面是一个简单的 React Native 组件：
import React from 'react';
import {Text} from 'react-native';
const HelloWorld = ({name}) => {
return <Text>Hello, {name}!</Text>;
};
export default HelloWorld;我们使用 Enzyme 的 shallow 方法对其进行测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ---------
------ ---------- ---- ----------------
-------------------- ---- -- -- -
----------- - ---- ----------- -- -- -
----- ------- - ------------------- ---------------
----- ------- - --------------------------------------
------------------------------- --------
---
---在上面的测试用例中，我们首先使用 shallow 方法来渲染 HelloWorld 组件，传入 name="Jack" 作为组件的属性。然后我们使用 find() 方法找到了 Text 组件并访问它的 children 属性，最后通过断言确认了组件渲染了正确的消息。
完全渲染（mount）
如果我们需要对组件的用户交互或 DOM 操作进行测试，我们可以使用 mount 方法：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ---------
------ ---------- ---- ----------------
-------------------- ---- -- -- -
--------- ------- ---------- -- -- -
----- ------- - ----------
----- ------- - ----------------- ---------------------
---------------------------------------
-----------------------------------------
---
---在上面的测试用例中，我们首先创建了一个 mock 函数 onPress，然后使用 mount 方法渲染 HelloWorld 组件，传入 onPress 函数作为组件的属性。之后我们使用 simulate() 方法模拟 Text 组件的 press 事件（可以替换为 touchable 组件的任何交互事件），最终我们通过断言确认了 onPress 函数被调用了一次。
静态渲染的变种（render）
如果我们需要对组件的 HTML 做一个快照测试（即当组件更新时，HTML 没有出现如何变化），我们可以使用 render 方法：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ---------
------ ---------- ---- ----------------
-------------------- ---- -- -- -
----------- ----------- -- -- -
----- ---- - ------------------ ---------------
-------------------------------
---
---在上面的测试用例中，我们使用 render 方法渲染 HelloWorld 组件，并通过 toMatchSnapshot() 方法检查呈现的 HTML 是否与预期相符。
总结
这篇文章介绍了如何使用 Enzyme 对 React Native 组件进行测试，以及 Enzyme 支持的三种测试方式：静态渲染（shallow）、完全渲染（mount）和静态渲染的变种（render）。希望这篇文章能够帮助你更好地理解和使用 Enzyme，提高你的 React Native 开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d22a2968c7c53b0bedae4