在前端开发中，测试是非常重要的一个环节。而 Jest 是 JavaScript 的一种测试框架，它为开发者提供了一个功能齐全的测试环境。然而，在进行单元测试时，有时候需要使用 spy 来监控某个函数的行为。因此，本文将介绍如何在 Jest 中使用 sinon 的 spies。
什么是 spy？
在测试中，我们可能需要对某个函数进行监控，以验证其是否被正确地调用、调用次数等信息。而 spy 就是一种用来监控某个函数的行为的工具。它可以劫持某个函数，记录其调用情况，并在需要时返回一些特定的值。如果开发者正在测试某一个函数，但该函数又依赖其他函数或者组件，那么使用 spy 就可以轻松解决这个问题。
如何使用 sinon 的 spies？
sinon 提供了一套功能强大的 stubbing 和 spying 工具，可以让我们更轻松地写出高质量、健壮的测试代码。下面是在 Jest 中使用 sinon 的 spies 的基本步骤：
1. 安装 sinon
首先，需要安装 sinon。可以使用 npm 或者 yarn：
--- ------- ----- ---------- - -- ---- --- ----- -----
2. 引入 sinon
----- ----- - -----------------
3. 创建 spy
在测试用例中，可以使用 sinon.spy() 创建一个新的 spy 对象。例如：
----- --- - ------------
可以传入被监控的函数来创建 spy：
----- --- - - ----- -- -- ----- --- - -------------- -------
4. 使用 spy
可以使用 spy 来监控函数的调用情况：
----- --- - - ----- -- -- ----- --- - -------------- ------- ---------- ----------------------------------
5. 恢复被劫持的函数
运行完测试用例后，需要恢复被劫持的函数：
----- --- - - ----- -- -- ----- --- - -------------- ------- ---------- -------------- -- -------- ----------------------------------
6. 设置 spy 的返回值
可以使用 spy 的 withArgs() 方法来为不同的参数设置不同的返回值：
----- --- - - -------- -- -- ----- --- - -------------- ------- ----------------------------- ----------------------------- ----------- -- -- --- ----------- -- -- ---
7. 添加断言
最后，需要添加断言来验证测试结果：
----- --- - - ----- -- -- ----- --- - -------------- ------- ---------- ----------------------------------
示例代码
下面是一个使用 sinon 的 spies 的示例代码：
----- ----- - -----------------
------------------- -- -- -
--------------------- -- -- -
---------- ---- ----------- ---- ------- --------- -- -- -
----- ------- - --- ----------
----- ---------- - ------------------ -------
-------------------
------------------------------------ ---------------------
---------------------
---
---
---在上面的代码中，使用 sinon.spy() 创建了一个新的 spy 对象，然后使用它监控了 console.log 函数的调用情况。在测试用例中，调用 myClass.sayHello() 后，使用 expect() 断言 console.log 是否被调用，并传入了正确的参数。
总结
本文介绍了如何在 Jest 中使用 sinon 的 spies 监控函数的调用情况，并给出了示例代码。使用 sinon 可以让测试更加轻松、高效，而 spy 则是其中一个非常有用的工具。希望本文可以对前端开发者进行一定的指导和帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647d17b5968c7c53b07f2803