Jest 是一款强大的 JavaScript 测试框架，在前端开发中得到了广泛的应用。在编写测试用例时，我们经常需要 mock 掉一些依赖，以便单元测试更加独立、可靠。而在某些情况下，我们需要 mock 全局变量，以模拟一些在测试环境中无法获得的上下文信息。本文将介绍 Jest 如何 mock 全局变量，并给出详细的示例代码，帮助读者更好地理解和应用。
什么是全局变量？
在 JavaScript 中，全局变量指的是在全局作用域下声明的变量，可以被任何函数访问。常见的全局变量包括：
- window：代表浏览器窗口，是 DOM 树的根节点；
- document：代表当前网页的文档对象，可以通过它获取页面元素、修改页面内容等；
- console：代表浏览器的控制台，可以用来输出调试信息等；
- setTimeout、setInterval：代表定时器，可以用来延迟执行或周期性执行某个任务；
- ...
在 Jest 测试环境中，这些全局变量都是不存在的，因此如果测试代码中依赖了它们，就会出现诸如“未定义”或“对象不可用”的错误。为了解决这个问题，我们需要学会如何 mock 全局变量。
使用 Jest 中的 global 对象
Jest 提供了一个 global 对象，可以用来模拟全局变量。我们可以在测试用例中通过 global.xxx 的方式来访问或修改全局变量 xxx，就像在普通 JavaScript 代码中一样。同时，我们也可以使用 Jest 提供的 jest.spyOn 方法来模拟全局变量上的方法或属性。下面是一个示例代码，演示了如何 mock window 上的 alert 方法：
test('test alert', () => {
const mockAlert = jest.fn();
global.alert = mockAlert;
window.alert('Hello Jest!');
expect(mockAlert).toHaveBeenCalledWith('Hello Jest!');
});上面的代码中，我们首先利用 jest.fn() 创建了一个 mock 函数 mockAlert，然后将其赋值给了 global.alert，即模拟了 window.alert。接着，我们调用 window.alert('Hello Jest!')，并使用 expect 断言 mockAlert 是否被调用，并传入了参数 'Hello Jest!'。
需要注意的是，我们使用 global 对象来模拟全局变量的时候，一定要保证在测试用例结束后重置它们，以免影响其他测试用例的运行。可以使用 Jest 提供的 afterEach 钩子函数来做到这一点：
afterEach(() => {
global.alert = undefined;
});使用 Jest 的 setupFiles 选项
如果你的项目有很多测试用例都需要 mock 同一个全局变量，那么每个测试用例里都写一遍 global.xxx = ... 就有些麻烦了。这时可以使用 Jest 的 setupFiles 选项来定义一个全局预置文件，实现全局变量的统一配置。
假设我们需要在多个测试用例中 mock window 上的 location 对象，我们可以先在 setup.js 文件中编写以下代码：
-- -------------------- ---- -------
------------- - ----------------------
------------------------------------ ----------- -
------ -
----- --------------------
--------- ----
------- ---
----- ---
---
-
---这段代码的意思是创建了一个 window 的副本，并将其中的 location 对象替换成了一个 mock 版本，其中包含了几个常用属性如 href、pathname、search、hash 等。接着，我们可以在 Jest 的配置文件中加入以下内容：
"jest": {
"setupFiles": [
"<rootDir>/setup.js"
]
}这样，每次运行测试用例时，Jest 都会自动先加载 setup.js，从而在全局范围内配置了我们需要 mock 的全局变量。
总结
本文介绍了 Jest 如何 mock 全局变量的两种方式，分别是利用 Jest 中的 global 对象和使用 setupFiles 选项。无论哪种方式，都可以让我们在测试用例中模拟一些难以获取的上下文信息，使得单元测试更加独立、可靠。当然，正确使用 Jest 还有很多其他的技巧和细节，读者可以参考 Jest 的官方文档，进一步提升自己的测试能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647bcd4a968c7c53b07182d7