在 Jest 中使用 JSDOM 进行 DOM 操作
Jest 是一款非常流行的前端测试框架，它不仅提供了优秀的测试工具链，而且还是一款非常快速、易于使用的工具。与之类似，JSDOM 是一个非常实用的 Node.js 模块，它允许您在服务器上使用 DOM API，这使得它成为了一个很好的工具来进行端到端的测试。在本文中，我们将会深入学习如何在 Jest 中使用 JSDOM 来进行 DOM 操作。
安装 JSDOM
在使用 JSDOM 之前，首先需要安装它。我们可以通过以下命令来在项目中安装该模块：
npm install jsdom --save-dev
这将会安装 JSDOM 并将其添加到项目的开发依赖中。
在 Jest 中配置 JSDOM
默认情况下，Jest 不会配置任何 DOM 环境，因此我们必须自己配置它。可以使用 Jest 提供的 setupFilesAfterEnv 选项来为每个测试文件设置全局变量：
// 在 package.json 中的 jest 配置中增加：
"jest": {
"setupFilesAfterEnv": ["<rootDir>/setupJest.js"]
}在 setupJest.js 文件中，我们可以使用 JSDOM 创建一个虚拟的 DOM 环境：
-- -------------------- ---- ------- ----- ----- - ----------------- ----- - ----- - - ------ ----- --- - --- ---------------- --------------------------- - ---- ------------------ --- ------------- - ----------- --------------- - ---------------- ---------------- - - ---------- ---------- --
这就提供了一个基本的 DOM 环境给了我们后续可以在 Jest 中测试各种 DOM 操作的机会。
使用 JSDOM 进行 DOM 测试
下面我们来看一个简单的例子，如何在 Jest 中使用 JSDOM 来进行 DOM 操作测试。
-- -------------------- ---- ------- --------- ---- -- -- - ----- ---- - ------------------------------ -------------- - -------- ---------------------------- ----- ------ - -------------------------------- --------------- ---------------------------------------- --------------- ---------------------------------------- ---
上述代码我们使用了 JSDOM 创建了一个虚拟的 DOM 环境，并在其中添加了一个带有点击事件的按钮。我们可以通过常规的 DOM 操作来处理该按钮。我们使用了 click() 方法来模拟用户单击操作，并使用 expect() 来断言按钮的内部 html 是否等于特定值。
总结
在 Jest 中使用 JSDOM 进行 DOM 操作测试是非常有意义的，因为它可以使我们的应用程序更加健壮，同时也能够将我们的测试范围扩展到包括 E2E 测试。本文为大家提供了一些关于 JSDOM 和 Jest 的实用技巧，希望您能够善加利用它们并编写出更好的测试用例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e3040bf6b2d6eab3e556db