简介
在前端开发中，经常会写单元测试，为了测试代码的正确性，需要使用一些 mock 数据。而全局变量的 mock 数据是比较常见的一种方式。global-mocks 是一款 npm 包，可以帮助我们方便地进行全局变量的 mock。
安装
在终端运行以下命令来安装 global-mocks：
npm install --save-dev global-mocks
使用方法
定义全局变量
首先，我们需要将需要 mock 的全局变量定义出来。在 src 目录下新建一个 mock 目录，然后在里面创建一个文件 globalMocks.js，把需要 mock 的全局变量都在这个文件中定义：
-- -------------------- ---- -------
------------- - -
--------- -
----- --------------------
-
--
--------------- - -
--------------- ---------- -
------ -
---------- -
---- ---------- --
-
-
-
--在上面的示例中，我们定义了 window.location.href 和 document.getElementById 这两个全局变量。其中 document.getElementById 的返回值也是一个对象，因为其实际上是一个 DOM 元素。
在测试文件中使用全局变量
定义了需要 mock 的全局变量后，我们需要把它们应用到测试文件中。在测试文件中，我们可以通过 global-mocks 提供的 mockGlobals() 方法来进行 mock：
-- -------------------- ---- -------
----- ----------- - ------------------------
----- ----------------- - ------------------------------ -- ----------
---------------- -- -- -
------------ -- -
-------------------------------------------
---
----------- -- -
---------------------------
---
------------ -- -- -
-- ----
---
---上面的示例中，我们引入了之前定义好的全局变量，并在 beforeAll 中应用了它们。在 afterAll 中，我们通过 global-mocks 提供的 resetGlobals() 方法来还原所有 mock 的全局变量。
常见问题解答
我需要 mock 很多全局变量，怎么办？
如果需要 mock 很多全局变量，可以将它们划分到不同的文件中进行管理，在 globalMocks.js 中通过 require 引入。例如：
const windowMocks = require('./windowMocks');
const documentMocks = require('./documentMocks');
global.window = windowMocks;
global.document = documentMocks;我的测试用例依赖异步操作，怎么使用全局变量的 mock？
如果测试用例依赖异步操作，需要在端口上避免异步操作对全局变量的污染。可以通过在测试用例前后分别进行还原操作来处理：
-- -------------------- ---- -------
----- ----------- - ------------------------
----- ----------------- - ------------------------------
---------------- -- -- -
------------ -- -
-------------------------------------------
---
----------- -- -
---------------------------
---
------------ ------ -- -
-- --------- ----- ---
-- ---
-------- - -----------
------------- -- -
-- ----------
-- ---
-- ------
---------------------------
-------
-- ------
---
---结语
global-mocks 是一款方便实用的 npm 包，可以帮助我们在前端开发中更加轻松地进行单元测试。本文简要介绍了 global-mocks 的使用方法，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f41c1eadbf7be33b25672ab