在前端开发中，Jest 是一个很流行的 JavaScript 测试框架。但是在使用 Jest 进行测试时，有时候会遇到 “ReferenceError: xxx is not defined” 的错误。这个错误表示在测试代码中使用了未定义的变量或函数，导致测试无法正常运行。在本文中，我们将详细讨论这个错误的原因以及解决方案。
原因分析
在 Jest 中，测试代码是运行在 Node.js 环境中的。因此，如果测试代码中使用了浏览器环境中的全局变量或函数，就会导致 “ReferenceError: xxx is not defined” 的错误。例如，在测试代码中使用 document 或 window 对象、使用 jQuery 或其他浏览器环境下的库等。
解决方案
要解决 “ReferenceError: xxx is not defined” 的错误，我们需要确保测试代码与被测试的代码在相同的环境中运行。具体来说，有以下几种解决方案：
1. 使用 JSDOM 模拟浏览器环境
JSDOM 是一个模拟浏览器环境的库，可以在 Node.js 中使用。使用 JSDOM 可以模拟出浏览器环境中的一些全局变量和函数，例如 document、window、XMLHttpRequest 等。我们可以在测试代码中引入 JSDOM，从而避免 “ReferenceError: xxx is not defined” 的错误。
下面是一个示例代码：
-- -------------------- ---- ------- -- -- ----- ----- ----- - ----------------- ----- - ----- - - ------ -- ---------- ----- -- ----- --- - --- ---------------- ---------------------------------- -- ------------- ----- --- ------------- - ----------- --------------- - -------------------- --------------------- - -------------------------- -- ------------- --------------- - -------------- -
2. 使用 jest-environment-jsdom 插件
除了手动引入 JSDOM，我们还可以使用 jest-environment-jsdom 插件来自动引入 JSDOM。只需要在 Jest 配置文件中添加如下配置即可：
// jest.config.js
module.exports = {
testEnvironment: "jest-environment-jsdom",
// 其他配置项
};这样，Jest 就会在测试时自动引入 JSDOM，从而避免 “ReferenceError: xxx is not defined” 的错误。
3. 使用 Jest 提供的全局变量和函数
除了 JSDOM，Jest 还提供了一些全局变量和函数，可以在测试代码中直接使用。例如：
- describe 和 it 函数：用于编写测试用例；
- expect 函数：用于断言测试结果；
- jest.fn 函数：用于创建一个模拟函数。
使用 Jest 提供的全局变量和函数可以避免 “ReferenceError: xxx is not defined” 的错误，并且更加简洁和易用。下面是一个示例代码：
describe("test", () => {
it("should work", () => {
const fn = jest.fn();
fn();
expect(fn).toHaveBeenCalled();
});
});总结
在使用 Jest 进行测试时，遇到 “ReferenceError: xxx is not defined” 的错误是常见的问题。这个错误通常是由于测试代码中使用了浏览器环境下的全局变量或函数，导致测试无法正常运行。为了解决这个问题，我们可以使用 JSDOM 模拟浏览器环境、使用 jest-environment-jsdom 插件自动引入 JSDOM，或者使用 Jest 提供的全局变量和函数。这些解决方案都可以避免 “ReferenceError: xxx is not defined” 的错误，并且让测试代码更加健壮和可维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66189e61d10417a2228ee19f
