在前端开发中，测试是至关重要的一环。Jest 是一个非常流行的 JavaScript 测试框架，而 Sinon 则提供了丰富的测试工具，包括 Spy、Stub、Mock 等。
在本文中，我们将重点关注 Jest 中如何使用 Sinon Spy，以及一些最佳实践。
Sinon Spy 简介
Sinon Spy 是一种功能强大的测试工具，能够监控函数调用、参数等信息，并根据这些信息做出相应的操作。它可以用于代码的测试以及数据的收集、分析等。
下面是使用 Sinon Spy 进行函数调用监控的示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- -------- ------ -- - ------ - - -- - ----- --- - --------------- ------------------ ---- -- -- - --------------------------- -- -- - ---------------------- -- -- - --- -- - ------------------------------ -- -- - - -
以上代码中，我们首先引入了 Sinon，并定义了一个名为 add 的函数。接着，我们使用 sinon.spy() 方法创建了一个函数调用监控器，并将其与 add 函数绑定。在调用 spy(1, 2) 时，监控器将记录调用次数、参数、返回值等信息。
Jest 中使用 Sinon Spy
在 Jest 中，我们可以使用 jest.fn() 方法创建一个类似于 Sinon Spy 的测试工具。jest.fn() 方法返回的是一个 mock 函数，它可以监控所绑定的函数的调用信息，并通过链式操作设置返回值、修改内部状态等操作。
下面是使用 jest.fn() 进行函数调用监控的示例代码：
-- -------------------- ---- ------- -------- ------ -- - ------ - - -- - ----- -- - ------------- ----------------- ---- -- -- - ---------------------------------- -- -- - ------------------------------ -- -- - -- - - -------------------------------------- -- -- -
以上代码中，我们使用 jest.fn() 方法创建了一个监控器，并将其与 add 函数绑定。在调用 fn(1, 2) 时，监控器将记录调用次数、参数、返回值等信息。
在 Jest 中使用 Sinon Spy 的最佳实践
在 Jest 中，可以使用 jest.spyOn() 方法创建一个 Sinon Spy，使得我们可以在 Jest 中使用 Sinon 的功能。需要注意的是，需要在使用 jest.spyOn() 方法之前，将 Sinon 导入到项目中。
下面是在 Jest 中使用 Sinon Spy 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------ -- -
------ - - --
-
------------- ---------- -- -- -
--- ----
------------- -- -
--- - ---------------
---
------------ -- -
-------------------
--------------
---
---------- ---- --- -------- ------ -- -- -
------ ---
------------------------------------
---
---------- ---- --- -------- ---- --- ----- ------------ -- -- -
------ ---
------------------------ -----------------
---
---以上代码中，我们首先在测试文件中导入了 Sinon。接着，我们定义了一个名为 add 的函数，并使用 sinon.spy() 方法创建了一个函数调用监控器。在每个测试用例前，我们都会调用 spy.resetHistory() 方法清空监控器的记录，并调用 spy.restore() 方法还原被监控的函数。在每个测试用例中，我们都通过 expect() 断言监控器的行为是否符合预期。
在使用 jest.spyOn() 方法时，需要注意一些细节：
- 不要使用箭头函数绑定 Sinon Spy，因为箭头函数无法直接修改
this对象； - 在每个测试用例中，都需要清空监控器的记录，并还原被监控的函数；
- 在每个测试用例中，都需要使用
expect()断言监控器的行为是否符合预期。
总结
在本文中，我们介绍了 Jest 和 Sinon 相关的知识，并讨论了在 Jest 中如何使用 Sinon Spy 的最佳实践。Jest 和 Sinon 都是非常实用的 JavaScript 测试工具，它们可以帮助我们更加轻松地进行代码测试。在使用时，需要注意一些细节，避免因为错误的使用方法导致测试结果出现偏差或错误。
完整代码：https://github.com/sinonjs/sinon/tree/master/examples/todomvc-jquery-jest
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f9ac9af6b2d6eab311faae