在 React 应用程序的开发过程中，测试是一个不可或缺的部分。但是，测试也是非常困难的，尤其是在前端开发中，因为 frontend 应用大量依赖于 DOM 和浏览器 API。为了解决这个难题，React 社区开发了许多工具，其中两种经常被使用，即 JSDOM 和 Enzyme。
JSDOM
JSDOM 是一个模拟浏览器环境的库，它可以让你在 NodeJS 中运行测试。它会初始化一个 Virtual DOM 环境，然后你就可以用类似于浏览器的方式访问和操作 DOM 元素。
基本使用：
----- ----- - ----------------- ----- - ----- - - ------ ----- --- - --- ---------------- ------------- ------------ ----------------------------------------------------------------
在此示例中，我们使用 JSDOM 初始化了一个虚拟环境，并在其中的 window.document 对象中查找了 <p> 元素。
操作 DOM：
由于 JSDOM 并不是真正地运行在浏览器中，因此它不会执行 CSS 样式或生成布局。这意味着你不能通过 JSDOM 来测试组件的布局或样式。但是，你可以使用 JSDOM 操作 DOM，例如添加或删除元素、更改元素属性或文本内容等：
----- - - --------------------------------------- ------------- - ------ ---- -------- ---------------------------------------- ---------------------------------------------------------------- -- ------- ------ ---- -------
在此示例中，我们使用 JSDOM 创建了一个新的 <p> 元素并在其上设置了一些文本内容，接着将其添加到虚拟 DOM 中并在其上查询了文本内容。
测试 React 组件：
当你在 React 组件中使用 JSDOM 时，你可以使用 React 测试工具包（例如 Jest）来运行测试。Jest 可以在虚拟环境中运行独立的测试用例，以测试组件的行为和交互。
这是一个使用 JSDOM 和 Jest 测试一个简单 React 组件的示例：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
-------------------------------
---
---------- ---- --- ------- ------ -- -- -
----- ------- - -------------------- ----
------------------------------------------------ ---------
---
---在这个示例中，我们首先使用 shallow 方法来渲染组件，然后在组件上查询元素并断言其文本内容。这是一个非常基本的例子，但你可以通过使用不同的 Enzyme 方法来测试许多其他操作和行为。
Enzyme
Enzyme 是一个 React 测试工具包，它为 React 组件提供了许多测试实用程序，例如渲染组件、访问组件元素、模拟用户事件等。
Enzyme 允许你以编程方式访问和操作组件元素，并可与 Jest 和其他测试框架轻松集成。
基本使用：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
-------------------------------
---
---------- ---- --- ------- ------ -- -- -
----- ------- - -------------------- ----
------------------------------------------------ ---------
---
---在此示例中，我们使用 Enzyme 的 shallow 方法来渲染组件，然后使用指定的选择器查找元素并断言其文本。
操作元素：
与 JSDOM 类似，Enzyme 也可用于操作组件元素。
----- ------- - -------------------- ---- ----- ------ - ----------------------- ------------------------- ----------------------------------------- --------------------------------------------- ------- --- ------ - ---------
在此示例中，我们使用 Enzyme 查询组件中的 <button> 元素，然后模拟了点击事件并断言了组件状态的更改和文本内容的更改。
总结
JSDOM 和 Enzyme 都是测试 React 应用程序的有用工具，但它们有不同的用途。JSDOM 可用于模拟浏览器环境，并在其中操作 DOM。它最适合于需要使用浏览器 API 的测试，例如像网络请求或 localStorage 这样的功能。Enzyme 则提供了许多测试实用程序，可以帮助你渲染组件、访问和操作组件元素。它适用于测试组件的行为和交互，但是在测试浏览器 API 方面并不那么适合。
你可以在项目中同时使用两种工具来进行测试，以便在不同的方案中选择更合适的工具。无论你选择哪种，测试都是非常重要的，并且有助于确保你的应用程序的质量和稳定性。
参考资料
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6645bc97d3423812e43c4c35