Jest 是一个流行的 JavaScript 测试框架，可用于编写单元测试、集成测试和端到端测试。与 Jest 结合使用的另一个流行库是 SinonJS，它提供了强大的 Mock 和 Spy 功能。
在本文中，我们将深入探讨 Jest 和 SinonJS 的集成，特别关注如何使用 SinonJS 进行 Mock 函数的使用。
安装 Jest 和 SinonJS
首先，您需要安装 Jest 和 SinonJS，可以使用 npm 或 yarn 来安装它们：
--- ------- ---------- ---- -----
或者
---- --- ----- ---- -----
编写测试用例
假设我们正在编写一个名为 sum 的函数，其功能是对两个数字进行加法运算。我们可以使用 Jest 和 SinonJS 来编写一个测试用例，以确保该函数以正确的方式工作。
----- --- - -----------------
----- ----- - -----------------
--------------- -- -- -
---------- --- --- --------- -- -- -
----- - - --
----- - - ---
----- -------------- - ---
----- --- - ------------
----- ------ - ------ -- -----
------------------------------------
----------------------------------
---
---在上面的测试用例中，我们首先导入 sum 函数并创建了一个 SinonJS 的 Spy 对象。这个 Spy 对象将被传递给 sum 函数，以便我们可以确定它是否被正确地调用了一次。
然后，我们调用 sum 函数并检查它的返回值是否等于期望值。最后，我们使用 SinonJS 的断言来验证 Spy 对象是否被正确地调用。
使用 Spy 对象拦截函数调用
在上面的示例中，我们创建了一个 Spy 对象以确保它被正确地调用了一次。但是，SinonJS 可以更进一步，并使用 Spy 对象拦截和修改函数调用的行为。
让我们将上面的示例修改为使用 SinonJS Spy 对象拦截函数调用：
----- --- - -----------------
----- ----- - -----------------
--------------- -- -- -
---------- --- --- ------- --- ---- - ---------- -- -- -
----- - - --
----- - - ---
----- -------------- - ---
----- --- - ------------
----- ------ - ------ -- -----
------------------------------------
----------------------------------
------------------------------- ---------------
---
---------- --- --- ------- --- ------ --- -------- -- -- -
----- - - --
----- - - ---
----- -------------- - ---
----- --- - ------------- -- - - ---
----- ------ - ------ -- -----
------------------------------------
----------------------------------
---------------------------------------------------------
---
---在第一个测试用例中，我们在 sum 函数中调用了 spy，并使用 SinonJS 的 calledWithExactly 断言来验证 spy 是否被调用，并且它的参数是否正确。
在第二个测试用例中，我们使用 SinonJS 的 spy 函数来创建一个带有自定义行为的 Spy 对象。这个 Spy 对象接收一个参数并将其乘以 2。然后在调用 sum 函数时，我们将这个 Spy 对象传递给它。在执行完毕后，我们使用断言来验证 Spy 对象是否正确地修改了函数的行为。
使用 Stub 对象替换函数
除了使用 Spy 对象来拦截和修改函数调用外，SinonJS 还允许我们使用 Stub 对象来代替函数。使用 Stub 对象可以轻松地模拟被测试函数所依赖的函数或方法。
假设我们正在编写一个名为 getUserData 的函数，它使用 fetch API 发送 HTTP GET 请求并处理响应。
-------- ------------- -
------ ------------------
---------------- -- ----------------
------------ -- -
-- ----
------ -----
--
-------------- -- -
-- ----
------ ----------------------
---
-为了测试这个函数，我们需要使用 SinonJS 的 Stub 对象来代替 fetch 函数。我们可以使用以下代码创建一个 Stub 对象：
----- ----- - -----------------
----------------------- -- -- -
--- ----------
------------- -- -
--------- - ------------------ ---------
---
------------ -- -
--------------------
---
---------- ----- ---- ---- ---- --- -------- ----- -- -- -
----- -------- - -
--- -----
----- -- -- ----------------- ----- ----- ---- ---
--
---------------------------------------------
----- -------- - ----- --------------
-------------------------- ----- ----- ---- ---
----------------------------------------
------------------------------------------------------------
---
---------- ------ -------- ----- -- -- -
----- ----- - --- ------------- --------
-----------------------------------------
----- ---------------------------------------------
----------------------------------------
------------------------------------------------------------
---
---在上面的测试用例中，我们使用 beforeEach 和 afterEach 钩子函数创建和销毁 fetch Stub 对象。在测试用例中，我们通过调用 fetchStub.returns(Promise.resolve(response)) 来指定 Stub 对象返回的响应对象。然后，我们可以使用这个 Stub 对象来代替 fetch 函数，并可以使用相关的 SinonJS 断言来验证它是否被正确地调用。
总结
在 Jest 中使用 SinonJS 进行 Mock 函数的使用有助于编写高质量的测试用例。在本文中，我们介绍了如何使用 SinonJS 创建和使用 Spy 和 Stub 对象。通过使用这些技术，我们可以更轻松地测试具有复杂依赖性的前端代码，并更好地保证其质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64acd35b48841e98948de3d9