在前端开发中，单元测试是非常重要的一环。然而，由于浏览器环境的复杂性，测试 DOM 操作通常需要在浏览器中运行。这不仅浪费时间，还可能导致测试结果不稳定。因此，我们需要一种方法来模拟 DOM 对象，并在非浏览器环境中运行测试。这就是 JSDOM 的作用。
JSDOM 是什么？
JSDOM 是一个基于 Node.js 的模拟 DOM 环境。它可以在 Node.js 中运行，模拟浏览器的 DOM 和 API，使得我们可以在非浏览器环境中测试 DOM 操作。
在 Jest 中使用 JSDOM
Jest 是一个流行的 JavaScript 测试框架，它支持在 Node.js 和浏览器环境中运行测试。在 Jest 中使用 JSDOM 可以轻松地模拟 DOM 对象，并进行单元测试。
首先，我们需要安装 JSDOM 和 @testing-library/dom：
--- ------- ---------- ----- --------------------
接下来，我们需要在测试文件中引入 JSDOM 并创建一个全局的 DOM 环境：
----- - ----- - - ----------------- ----- --- - --- ---------------- --------------------------------- - ---- ------------------ --- ------------- - ----------- --------------- - --------------------
这里我们创建了一个空的 HTML 页面，并将其作为参数传递给 JSDOM 的构造函数。我们还设置了页面的 URL，这是因为某些库可能会根据 URL 来执行不同的操作。最后，我们将 window 和 document 对象设置为全局变量，这样我们就可以在测试中使用它们了。
接下来，我们可以编写测试代码。例如，我们想测试一个函数 add，它将两个数字相加并返回结果。我们可以编写如下测试代码：
----- - ----------- - - --------------------------------
------------- ---------- -- -- -
---------- --- --- --------- -- -- -
----- ------ - ------ ---
-----------------------
---
---------- ------ --- ------ --------- -- -- -
----- - - -------------------------- -----
----- - - -------------------------- -----
----- ------ - -------------------------- ----------
------- - ----
------- - ----
-------------
-------------------------------------
---
---在第一个测试中，我们测试了 add 函数的基本功能。在第二个测试中，我们测试了 addNumbers 函数，它将页面中的两个输入框中的数字相加，并将结果显示在页面上。我们使用 getByTestId 函数来获取页面上的元素，并更新它们的值。最后，我们检查结果元素的文本内容是否正确。
总结
JSDOM 是一个非常有用的工具，它可以帮助我们在非浏览器环境中测试 DOM 操作。在 Jest 中使用 JSDOM 非常简单，只需要引入 JSDOM 并创建一个全局的 DOM 环境即可。然后，我们就可以像在浏览器中一样编写测试代码了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c47b99add4f0e0ffeff1c4