在前端开发中，我们经常会使用一些全局引用，如 window、document 等等。而当我们进行测试时，这些全局引用的存在却让我们的测试变得困难。因为它们的值是不可控的，可能会影响我们的测试结果。这时，我们就需要用到 Jest 提供的 mock 功能来解决这个问题。
什么是 Jest 的 mock 功能
在 Jest 中，mock 是指模拟和替换测试中的函数和对象，以达到控制测试环境的目的。Mock 功能可以帮助我们模拟一些数据和环境，使得测试更加全面和准确。
如何 mock 掉一个全局引用
接下来，我们以一个简单的示例来详细讲解如何 mock 掉一个全局引用。
假设我们有一个函数 getData()，它依赖于全局对象 window，如下所示：
function getData() {
const result = window.fetch('https://example.com/data')
.then(res => res.json())
.catch(err => console.error(err));
return result;
}我们想要测试这个函数，但是 fetch 方法需要在浏览器环境下才能正常工作，而在 Jest 中是不存在浏览器环境的，因此会导致测试失败。
为了解决这个问题，我们需要使用 Jest 提供的 mock 方法来替换 window.fetch，如下所示：
-- -------------------- ---- -------
------------- -- -
------------ - ---------- -- -----------------
----- -- -- --------------------- ------
----
---
------------ -- -
-------------------------
------ -------------
---
------------ --- ---- ---- ----- ----- -- -- -
----- ---- - ----- ----------
----------------------- -------
---在上面的代码中，我们使用了 beforeEach 和 afterEach，分别在每个测试用例运行前后进行设置和清理工作。
在 beforeEach 中，我们将全局对象 fetch 替换成了一个 Jest 默认提供的空函数，并且使用 .mockImplementation() 方法模拟了一个返回字符串 'mock data' 的 JSON 数据。
在测试用例中，我们可以直接调用函数 getData，而不用担心全局对象 window.fetch 的问题。运行测试时会使用我们在 beforeEach 中定义的 mock 方法。
最后，在 afterEach 中，我们清理了全局对象 fetch 并将其值设置为 undefined。
总结
在 Jest 中使用 mock 功能可以帮助我们模拟和替换测试中的函数和对象，达到控制测试环境的目的。本文介绍了如何在 Jest 测试时 mock 掉一个全局引用，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64507e64980a9b385b98416d