在实际的开发中，React 单元测试是非常重要的一部分。可以大大提高代码的质量，降低维护成本。在 React 单元测试中，我们通常会用到 Enzyme 和 Jsdom，它们是目前 React 测试中最受欢迎的工具之一。
Enzyme
Enzyme 是由 Facebook 开发的一款用于测试 React 组件的工具库。它提供了一套简洁的 API，使得我们可以方便地操作、查询和测试组件的行为和状态。
Enzyme API 可以分为三种类型：浅渲染 (Shallow Rendering)、静态渲染 (Static Rendering) 和完整渲染 (Full Rendering)。
浅渲染
浅渲染指的是只渲染当前组件，而不渲染子组件。这种渲染方式优点是快速且容易编写。
-- -------------------- ---- ------- ------ ----- ---- ------- ------ - ------- - ---- -------- ------ ------ ---- ---------- ---------- ------ --- -------- -- -- - ----- ------- - --------------------- --------------- ------------------------------------------------- ------- --
在上面的测试中，我们使用的是 shallow 方法进行浅渲染，然后使用 find 方法查询组件内部的元素。在这个例子中我们断言了 button 的文本是否为 "Hello World"。
静态渲染
静态渲染指的是将 React 组件渲染为静态 HTML 字符串，这种渲染方式不会包含组件自身的事件处理逻辑。
-- -------------------- ---- ------- ------ ----- ---- ------- ------ - ------ - ---- -------- ------ ------ ---- ---------- ---------- ------ --- -------- -- -- - ----- ---- - -------------------- ---------------------- -------------------------------- ---------------- --
在上面的测试中，我们使用的是 render 方法进行静态渲染，然后使用 html 方法获取渲染的 HTML 字符串，最后断言与预期的字符串是否一致。
完整渲染
完整渲染指的是将 React 组件挂载到 DOM 中，这种渲染方式会触发组件的生命周期函数和事件处理逻辑。
-- -------------------- ---- ------- ------ ----- ---- ------- ------ - ----- - ---- -------- ------ ------ ---- ---------- ---------- ------ --- ----- --- -------- -- -- - ----- ------- - --------- ----- ------- - ------------- ----------------------- --------------- ------------------------------------------------- ------- ---------------------------------------- ---------------------------------- --
在上面的测试中，我们使用的是 mount 方法进行完整渲染，然后使用 find 方法查询组件内部的元素。在这个例子中我们先断言了 button 的文本是否为 "Hello World"，然后使用 simulate 方法模拟点击按钮并断言点击事件是否被触发。
Jsdom
Jsdom 是一个基于 Node.js 的库，可以模拟浏览器环境。使用 Jsdom 可以为 Enzyme 提供一个 DOM 环境，使得我们可以在 Node.js 上测试 DOM 操作和事件。
import { JSDOM } from 'jsdom';
const { document } = new JSDOM('<!doctype html><html><body></body></html>').window;
global.document = document;
global.window = document.defaultView;上面的代码中，我们创建了一个空的 DOM 环境，并将它挂载到全局变量中，这样我们就可以在测试中使用 DOM 相关的操作了。
总结
Enzyme 和 Jsdom 是 React 单元测试中不可或缺的工具，它们的简洁 API 和完整的浏览器模拟环境为我们提供了丰富的测试功能。合理使用这两个工具，可以为我们在开发过程中提供可靠的自动化测试和质量保证。
参考代码
我们在这里提供一个示例组件和测试代码，供大家参考。
// Button.js
import React from 'react';
const Button = ({ children, onClick }) => {
return <button onClick={onClick}>{children}</button>;
};
export default Button;-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ - -------- ------ ------ - ---- ---------
------ - ----- - ---- --------
------ ------ ---- -----------
----- - -------- - - --- ---------------- -----------------------------------------
--------------- - ---------
------------- - ---------------------
------------------ -- -- -
---------- ------ --- -------- -- -- -
----- ------- - --------------------- ----------------
------------------------------------------------- --------
---
---------- ------ --- ----- --- -------- -- -- -
----- ------- - ----------
----- ------- - ------------- ----------------------- ----------------
------------------------------------------------- --------
-----------------------------------------
-----------------------------------
---
---------- ------ --- ------ ------ -- -- -
----- ---- - -------------------- -----------------------
-------------------------------- -----------------
---
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64698fce968c7c53b0970cec