在前端开发中，测试是非常必要的。而随着前端技术的不断发展，测试框架也越来越多。其中，Jest 是一个非常流行的测试框架，它支持多种前端项目的测试。在 Jest 中，使用 JSDOM 模拟 DOM 是非常常见的做法，今天我们就来详细介绍如何在 Jest 中使用 JSDOM 模拟 DOM。
什么是 JSDOM
JSDOM 是一个用于在 Node.js 环境中模拟 DOM 的库。它可以将 HTML 代码转化为一棵 DOM 树，并提供了一些操作 DOM 的方法，可以在 Node.js 中实现 DOM 相关的操作。JSDOM 实现了大部分的 DOM API，对于大部分前端项目来说，完全可以使用 JSDOM 来模拟 DOM。
如何使用 JSDOM
在 Jest 中，可以通过在测试文件中导入 JSDOM 来使用它，首先需要安装 JSDOM：
npm install jsdom --save-dev
安装好后，我们就可以在测试文件中导入了：
-- -------------------- ---- -------
----- - ----- - - -----------------
--------------- ------ -- -- -
----------- ------ ------ -- -- -
----- --- - --- --------
----- -------- - --------------------
-- ---
---
---在上面的例子中，我们首先导入了 JSDOM，然后在测试用例中创建了一个 JSDOM 实例，并通过 window 属性获取了 document 对象。我们也可以使用 new JSDOM('<html></html>') 来初始化 JSDOM，然后可以访问 window 属性来获取 document 对象。
通过 JSDOM，我们就可以在测试中使用 DOM API 了，例如能够在测试中操作 DOM 对象，给 DOM 元素添加事件监听器，等等。
示例
下面是一个使用 JSDOM 进行测试的示例代码：
-- -------------------- ---- -------
----- - ----- - - -----------------
--------------- ------ -- -- -
----------- ------ ------ -- -- -
----- ---- - ----- ---------------- ----------------- -------------------
----- --- - --- ------------
----- -------- - --------------------
----- ------ - ----------------------------------
-------------------------------- ---------- -
---------------------------------------- - -----------------
---
---------------
------------------------------------------------------------------------
---
---在上面的测试中，我们首先创建了一个 DOM ，并在 DOM 中添加了一个按钮元素。然后给按钮添加了一个点击事件监听器，用于在按钮被点击时修改 DOM，将 #app 元素的 innerHTML 修改为一个包含 "Clicked" 文字的 p 元素的 HTML 代码。最后，我们模拟了点击按钮，并检查 #app 元素的内容是否被正确地修改了。
总结
使用 JSDOM 来模拟 DOM 是非常常见的做法，它可以使我们在 Node.js 环境中实现前端测试。在 Jest 中使用 JSDOM 也非常简单，只需要在测试文件中导入并创建一个 JSDOM 实例即可。通过 JSDOM，我们可以像在浏览器中一样操作 DOM 对象，添加事件监听器，进行 DOM 的修改等等操作，从而实现了前端测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3c46348841e9894027b43