在前端开发中，测试是非常重要的一个环节。而 Mocha 作为一款强大的测试框架，可以帮助我们进行端到端的测试，验证我们的代码是否达到我们的预期。而 Sinon.js 是一个强大的库，它可以帮助我们在测试过程中，模拟数据、拦截请求等等。在本文中，我们将详细介绍如何在 Mocha 中使用 Sinon.js 进行 spy。
准备工作
在我们开始之前，我们需要先安装 Mocha 和 Sinon.js 这两个模块。
npm install --save-dev mocha sinon
Spy 的概念
在开始之前，我们需要知道 Spy 的概念。Spy 是 Sinon.js 提供的一种 mock 的方式，它可以监听被调用的函数，并记录下这些函数的调用情况。Spy 同时也具有 mock 的特征，可以修改函数的返回值、修改函数的行为等。
最简单的 Spy
我们首先介绍如何创建最简单的 Spy。在我们的例子中，我们有一个 add 函数，它接收两个参数，并返回这两个参数的和。
function add(a, b) {
return a + b;
}我们需要测试这个函数的正确性，我们可以使用 Mocha 进行测试：
describe('add', function () {
it('should return the sum of two numbers', function () {
const result = add(1, 2);
assert.equal(result, 3);
});
});这是一个简单的测试用例。我们可以使用 assert 断言库验证函数的返回值是否正确。但是，在这个例子中，我们无法验证 add 函数是否被调用了。这个时候，我们可以使用 Sinon.js 提供的 Spy 来帮助我们验证。
-- -------------------- ---- -------
--------------- -------- -- -
---------- ------ --- --- -- --- --------- -------- -- -
----- --- - ------------
----- ------ - ------ ---
------
------------------------ ------
-------------------- ---
---
---我们创建了一个最简单的 Spy，定义了一个 spy 变量，然后在 add 函数调用之后，我们调用了这个 spy。最后，我们使用 spy.called 来验证 add 函数是否被调用了。如果断言失败，说明 add 函数没有被调用。
在实际开发中使用 Spy
最简单的 Spy 可以帮助我们验证函数是否被调用。但在实际开发中，我们可能需要更加复杂一些的场景。
假设我们现在需要测试一个 initialize 函数，它需要调用 sendRequest 函数和 setCache 函数。其中 sendRequest 函数会向服务端请求数据，setCache 函数会将数据缓存到本地。我们需要验证 sendRequest 和 setCache 函数是否被正确的调用。
-- -------------------- ---- ------- -------- ------------ - ----- ---- - -------------- --------------- - -------- ------------- - -- -- --------- - -------- -------------- - -- -- --------- -
我们的测试用例可以这么写：
-- -------------------- ---- -------
---------------------- -------- -- -
---------- ---- ----------- --- ---------- -------- -- -
----- -------------- - ------------
----- ----------- - ------------
----- ------------- - ----------------- --------------
------------------ - ---------------
--------------- - ------------
-------------
----------------------------------- ------
-------------------------------------------------------------------- ------
---------------------------------- ------
-------------------------
----------------------
------------------------
---
---在这个测试用例中，我们创建了三个 Spy，分别是 sendRequestSpy、setCacheSpy 和 initializeSpy。其中 sendRequestSpy 和 setCacheSpy 分别用来监听 sendRequest 函数和 setCache 函数。initializeSpy 用来监听 initialize 函数，它可以帮助我们验证 initialize 函数是否被调用了。
我们使用 window.sendRequest 和 window.setCache 来替换原来的函数，这样我们就可以在调用 initialize 函数的时候，监听它们的调用情况了。
在我们的第三个断言中，我们使用了 calledWith 方法来验证 setCache 函数是否被正确的调用。我们知道，sendRequest 函数会返回一些数据，而这些数据会作为参数传递给 setCache 函数。我们通过 sendRequestSpy.returnValues[0] 来获取 sendRequest 函数返回的数据，然后将这个数据传递给 setCacheSpy.calledWith 方法。
最后，我们需要注意的是，在测试结束之后，我们需要 restore 所有的 Spy，这可以帮我们避免对全局的影响。
总结
在本文中，我们介绍了在 Mocha 中使用 Sinon.js 进行 spy 的方法。我们从最简单的 Spy 开始，分别详细介绍了在实际开发中如何使用 Spy。Spy 可以帮助我们监听函数的调用情况，验证函数是否被正确的调用。Spy 同时还具有 mock 的特征，可以模拟数据、修改函数的行为等等。掌握了 Spy 的使用方法，可以帮助我们写出更加健壮的测试用例，提高代码的可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e31a78f6b2d6eab3e77010