在 React 应用开发中，测试是非常重要的一环。Enzyme 是一个 React 测试工具库，它提供了一个简单而优雅的 API 来测试 React 组件的输出。本文将介绍 Enzyme 的 Adapter 机制，希望能够让读者更深入地了解 React 并提高测试代码的质量。
Enzyme 是什么？
Enzyme 是由 Airbnb 开源的 React 测试工具库，它提供了一套 API 来模拟用户行为、渲染组件树，并对测试输出进行断言。Enzyme 接受多种渲染方式：浏览器环境中使用 jsdom、Node.js 环境中使用 Node 和 Cheerio，以及 React Native。
在 Enzyme 中，有三种渲染方式，分别是：shallow、mount 和 render。其中，shallow 是浅渲染，能够测试组件的 UI 输出和交互行为；mount 是深渲染，能够测试组件的子组件和生命周期方法；render 能够渲染组件到一个静态的 HTML 字符串中。
Adapter 是什么？
Adapter 是 Enzyme 的重要概念之一，它是当 Enzyme 渲染 React 组件时所需的一组底层库的绑定。Enzyme 支持三种 Adapter，分别是 EnzymeAdapter React 16、Enzyme-adapter-react-15 和 Enzyme-adapter-utils。
在 React 16.0.0 版本之后，它增加了 Fiber 底层架构，整个架构发生了巨大的变化，因此 Enzyme 增加了一种新的 Adapter，EnzymeAdapter React 16。如果你的 React 版本低于 16.0.0，那么你需要使用 Enzyme-adapter-react-15。
Enzyme-adapter-utils 是一个通用的测试工具库，不仅仅适用于 React，而且还包括了一些通用的实用函数。
使用 Adapter 进行渲染
使用 Adapter 进行渲染很简单，只需要在使用之前先安装 Adapter，并在测试文件中引入 Adapter 和 Enzyme。以 EnzymeAdapter React 16 为例，安装命令如下：
npm install --save-dev enzyme enzyme-adapter-react-16
在测试文件中，应该将 EnzymeAdapter React 16 导入到文件中，并在使用之前调用适配器的配置方法 configure()。示例代码如下所示：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });这个配置方法只需要调用一次即可，之后在测试过程中就可以使用 Enzyme 进行组件的渲染和断言输出。
Adapter 的指导意义
适配器机制使 Enzyme 能够针对不同的环境使用不同的渲染器。这样，开发人员就可以在多个不同平台上测试组件，而不需要编写平台特定的测试代码。另外，使用适配器还可以使 Enzyme 更具扩展性和兼容性，因为它可以轻松地适应未来可能变化的 React 底层架构。
实例应用
下面是一个组件 Count 的示例代码，它接收两个 prop 值：count 和 onCountChange，并通过按钮点击事件改变 count 的值。使用 shallow 方法进行浅渲染后，断言 count 组件渲染后输出的 HTML 代码，代码如下所示：
-- -------------------- ---- -------
------ - -------- --------- - ---- ---------
------ ------- ---- --------------------------
------ -------- ---- ----------------------
------ ----- ---- ----------
-- ------ ------- --
----------- -------- --- --------- ---
--------------- ---- -- -- -
---------- -- -- -
----- ----- - --
----- ------------- - -- -- ---
----- ------- - --------
------ ------------- ----------------------------- --
--
----- ----- - -------------------
----- --------- - -----------------------
------------------------------
----------------------------------
-------------------------------------------------
----------------------------
--------------------------------------------- - -----
---
---总结
本文介绍了 Enzyme 的 Adapter 机制，它是 Enzyme 的重要概念之一。了解 Adapter 的概念和使用方法可以使你更好的进行 React 项目测试。希望这篇文章能够帮助你更深入地了解 React 和 Enzyme，并在开发过程中提供参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651f85cb95b1f8cacd713a6f