在前端开发中，我们常常需要使用 Jest 进行单元测试，其中一个常见的问题就是如何在测试中 stub 掉全局函数或对象。本文将详细介绍 Jest 如何实现这一功能，并提供简单易懂的示例代码以及指导意义。
什么是 Stub
在软件开发中，“Stub”是一种测试替身，用于在测试中代替真正的组件或对象。Stub 遵循一定的接口规范，可以替代真正的组件或对象，并返回预设的数据或行为。
在 Jest 中，我们可以利用 Jest.fn() 函数来创建简单的 Stub。例如：
----- ---------- - ----------
上述代码将创建一个简单的 Stub 函数，我们可以在测试中调用该函数，并对返回值进行检查。
如何 Stub 掉全局函数或对象
在 Jest 中，我们可以使用 jest.spyOn() 函数来 Stub 掉全局函数或对象。该函数可以接收两个参数：需要被替换的对象以及要被替换的方法名称。例如，我们可以这样创建一个全局函数，并将其传入 jest.spyOn() 函数中：
-------- ------------------ - -- --------- - ------------------ --------------------
上述代码将创建一个名为 myGlobalFunction 的全局函数，并使用 jest.spyOn() 函数来创建一个 Stub。现在，我们可以在测试中调用该函数，并进行相关的检查。
需要注意的是，如果我们想要在测试完成后将 Stub 恢复为原始函数（以便其他测试可以继续使用该函数），我们可以使用 spyOn().mockRestore() 方法：
------------------ ----------------------------------
该代码将从 window 对象中移除 myGlobalFunction 函数，并将其还原为原始函数。
示例代码
为了更好地说明如何在 Jest 中 Stub 掉全局函数或对象，我们可以编写以下示例代码：
-- ------------------
-------- ------------- -
------ ----- -----
-
-- --------------
------ - ----------- - ---- --------------------
------ -------- ------------- -
------ --------------
-
-- -------------------
------ - ----------- - ---- ----------------
------ - -- --------------- ---- --------------------
----------------------- -- -- -
------------ ------ --- ------- ---------- -- -- -
--------------------------- ------------------------------------ ------
----- ------ - --------------
---------------------------- ------
--------------------------- -----------------------------
---
---上述代码定义了一个名为 getUserName 的全局函数并将其导入到 myComponent.js 文件中。然后，我们可以在 myComponent.test.js 文件中 Stub 掉 getUserName 函数并测试 getUsername 函数是否正确返回预期的结果。
在测试中，我们使用 jest.spyOn() 函数来创建一个 getUserName 的 Stub，该函数的返回值为 'Jane Doe'。然后，我们调用 getUsername 函数，并使用 expect() 函数来检查返回值是否为 'Jane Doe'。最后，我们使用 spyOn().mockRestore() 方法来将 getUserName 函数还原为原始函数。
结论
在 Jest 中，我们常常需要 Stub 掉全局函数或对象以便进行单元测试。本文介绍了如何使用 jest.spyOn() 函数来实现该功能，并提供了简单易懂的示例代码。当您需要在 Jest 中模拟全局函数或对象时，您可以使用上述技术来方便地创建 Stub，以便在测试中获取预期的结果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671dcfa19babaf620fb843fb