在前端开发中，Mocha 是一个广泛使用的 JavaScript 测试框架。这个框架让编写测试变得非常容易，可以帮助我们更轻松地验证代码的正确性。在进行测试时，如果我们想 mock 掉全局变量，那么该怎么实现呢？本文将介绍如何在 Mocha 测试中 mock 掉全局变量，从而让我们更加方便地进行测试。
什么是全局变量？
全局变量是在整个 JavaScript 应用程序中都可以访问的变量。这些变量通常是在加载应用程序时创建的，在全局范围内声明。全局变量可以存储应用程序的状态，也可以用于在整个应用程序中共享数据。
在前端应用程序中，全局变量可以是 window 对象、document 对象、navigator 对象等等。在编写测试时，如果我们要 mock 掉全局变量，那么就需要知道如何访问它们，从而对其进行 mock。
Mock 全局变量的方法
我们可以使用一个叫做 jsdom 的库来模拟浏览器环境，从而 mock 掉全局变量。这个库可以创建一个类似于浏览器的环境，包括 window 对象和 document 对象等等。下面是一个示例代码：
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', { url: 'http://localhost' });
global.window = dom.window;
global.document = dom.window.document;
global.navigator = dom.window.navigator;在上述代码中，我们使用了 jsdom 库来创建一个包含 document 和 window 对象的虚拟 DOM。然后，我们将这些对象设置为全局对象，从而可以在测试中 mock 掉它们。
示例
现在，我们来看一个简单的例子，演示如何在 Mocha 测试中 mock 掉全局变量。假设我们有一个名为 add 函数的函数，该函数依赖于全局变量 window 对象中的 localStorage 属性。我们的测试代码如下所示：
-- -------------------- ---- -------
-------- ------ -- -
------ - - - - ------------------------------------
-
--------------- -------- -- -
--- ----------------
--------------------- -
--------------- - ---------------------------
-------------------------- - -
-------- -------- ----- -
------ ------
-
--
---
------------------ -- -
-------------------------- - ----------------
---
---------- --- ----------- -------- -- -
------------- -- --- -----
---
---在上面的代码中，我们首先保存了原始的 localStorage 对象，然后将它 mock 掉，使用一个新的 localStorage 对象。在 beforeEach 钩子函数中，我们将 window.localStorage 设置为一个新的对象，并重写了其 getItem 方法，这样我们就可以控制其返回值。在 afterEach 钩子函数中，我们将 window.localStorage 设置回原来的对象，以避免对其他测试代码产生影响。
接下来，我们编写一个测试用例，确保我们的 add 函数按预期工作。我们调用 assert 函数来验证计算结果是否正确。在这个例子中，我们使用了 global 对象来访问 window.localStorage 属性。
结论
在本文中，我们介绍了如何在 Mocha 测试中 mock 掉全局变量。我们使用了 jsdom 库来创建一个虚拟的 DOM，包括 window 对象和 document 对象等等。然后，我们将这些对象设置为全局变量，从而方便我们在测试中 mock 掉全局变量。最后，我们演示了一个例子，以说明如何在测试中使用这种方法进行全局变量的 mock。这个过程可以帮助我们更加方便地进行测试，对代码的质量保证起到了很大的提升作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f75f31c5c563ced59874c6
