在进行前端开发时，测试是非常重要的一环。而 Jest 是一个流行的 JavaScript 测试框架，它提供了很多方便的工具和 API 来进行测试。但是，有时候在 Jest 进行测试时，会出现 “ReferenceError: document is not defined” 的错误，这是因为在 Jest 中没有 DOM 环境。那么我们该怎么办呢？
为什么会出现 “ReferenceError: document is not defined” 错误？
在浏览器中，document 是一个全局变量，它代表了当前页面的 DOM 树。而在 Jest 中，由于没有浏览器环境，所以 document 变量是未定义的。因此，在一些测试中，如果使用了 document 对象，就会出现 “ReferenceError: document is not defined” 的错误。
解决方法
为了解决这个问题，我们需要在 Jest 中模拟一个浏览器环境。Jest 提供了一个名为 jsdom 的包，它可以模拟浏览器环境，包括 DOM 和一些浏览器 API。我们可以通过安装 jsdom，来解决这个问题。
首先，我们需要安装 jsdom：
npm install --save-dev jsdom
然后，在测试文件中，我们需要手动创建一个 DOM 对象，并将它赋值给全局变量 document。这可以通过以下代码实现：
const { JSDOM } = require('jsdom');
const dom = new JSDOM('<!doctype html><html><body></body></html>');
global.document = dom.window.document;
global.window = dom.window;这段代码中，我们使用了 JSDOM 创建了一个 DOM 对象，并将它赋值给全局变量 document 和 window。这样，我们就可以在测试中使用 document 对象了。
示例代码
下面是一个示例代码，它测试了一个函数是否能够正确地向页面中添加一个元素。
-- -------------------- ---- -------
----- - ----- - - -----------------
-------- ------------ -
----- --- - ------------------------------
------------- - -------
-------------------------------
-
---------------------- -- -- -
------------- -- -
----- --- - --- ---------------- ----------------------------------
--------------- - --------------------
------------- - -----------
---
---------- - --- ------- -- --- ------ -- -- -
-------------
-------------------------------------------------------
---
---在这个测试中，我们首先创建了一个 addElement 函数，它向页面中添加了一个带有类名为 test 的 div 元素。然后，我们使用 describe 和 test 函数来定义一个测试套件和测试用例。在 beforeEach 函数中，我们创建了一个 DOM 对象，并将它赋值给全局变量 document 和 window。在测试用例中，我们调用 addElement 函数，然后使用 expect 函数来判断是否成功地向页面中添加了一个带有类名为 test 的 div 元素。
总结
在 Jest 进行测试时，如果出现 “ReferenceError: document is not defined” 的错误，我们可以通过使用 jsdom 包来模拟一个浏览器环境，然后手动将它赋值给全局变量 document 和 window。这样，我们就可以在测试中使用 document 对象了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dec8ae1886fbafa4c0c1a4