在前端开发过程中，单元测试是一个至关重要的环节。而 Chai 是 Javascript 的一个测试库，提供了一系列断言方法，能够方便地进行单元测试。在 Chai 中，除了丰富的断言方法，还有一个非常实用的功能，即 spy（间谍）功能，本篇文章将为大家介绍 spy 的使用方法。
什么是 spy
简单来说，spy 就是在测试代码中模拟一个函数，可以用来记录该函数被调用的情况，并且可以记录函数被调用时的参数、返回值、上下文等信息，让我们能够更好地了解代码的运行情况，从而进行更加全面有效的单元测试。
使用方法
在 Chai 中使用 spy 需要用到 Sinon.js 这个库，所以在使用之前需要先引入它：
<script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/7.5.0/sinon.min.js"></script>
Sinon.js 是一个用于测试的工具库，其中包含了 spy 功能。
接下来就可以在测试代码中通过 Sinon.js 的 spy 方法来创建一个 spy 对象了。假设我们要测试以下这个函数：
function add(a, b) {
return a + b;
}我们可以在测试代码中这样使用 spy：
const addSpy = sinon.spy(add);
这段代码就会创建一个名为 addSpy 的 spy 对象，该对象就可以代替 add 函数在测试中被调用。
spy 对象有多种用法，下面将逐一介绍。
调用情况
我们可以利用 spy 对象的 called 属性来判断该函数是否被调用过，并记录其调用次数。
addSpy(1, 2); addSpy(3, 4); expect(addSpy.called).to.be.true; // 测试 add 函数是否被调用过 expect(addSpy.callCount).to.equal(2); // 测试 add 函数被调用的次数
在这个例子中，addSpy 一共被调用了两次，called 属性返回 true，而 callCount 属性返回 2。
参数和返回值
我们还可以利用 spy 对象来获取函数被调用时的参数和返回值。
addSpy(1, 2); expect(addSpy.firstCall.args).to.deep.equal([1, 2]); // 测试第一次调用的参数是否为 [1, 2] expect(addSpy.returned(3)).to.be.true; // 测试函数是否返回了 3
在这个例子中，addSpy 第一次被调用时的参数为 [1, 2]，我们利用 firstCall 属性获取了这个参数数组。另外，在程序中我们可以看到 add 函数在两次调用时都返回了一个具体的值，而 returned 方法可以用来测试函数是否返回了指定的值。
上下文
spy 对象也可以记录函数在被调用时的上下文（即 this）。我们可以利用 spy 对象的 thisValue 属性来获取函数被调用时的上下文。
const obj = { x: 1 };
addSpy.call(obj, 1, 2);
expect(addSpy.thisValue).to.deep.equal(obj); // 测试函数被调用时的上下文是否为 obj这个例子中，我们通过 call 方法将调用 add 函数时的上下文改变为 obj，最后利用 thisValue 属性获取了函数被调用时的上下文。
示例代码
最后，我们来看一个完整的测试代码示例：
-- -------------------- ---- -------
-------- ------ -- -
------ - - --
-
------------ --- ---- ---------- -
--- ------ - -----
--------------------- -
------ - ---------------
---
--------------------- ---------- -
--------- ---
--------- ---
---------------------------------
-------------------------------------
---
----------------- ---------- -
--------- ---
----------------------------------------------- ----
--------------------------------------
---
-------------- ---------- -
----- --- - - -- - --
---------------- -- ---
--------------------------------------------
---
---在这个测试中，我们先用 beforeEach 函数在每个测试用例执行前创建了一个 add 的 spy 对象，然后在每个测试用例中测试 addSpy 对象的不同用法。最后的输出结果将会是：
测试 add 函数 ✓ 测试函数是否被调用过及调用次数 ✓ 测试函数的参数和返回值 ✓ 测试函数的上下文 3 passing (6ms)
这个测试通过了所有用例，说明我们已经完整地测试了 add 函数的各个方面。
总结
本篇文章介绍了 Chai 中的 spy 功能的使用方法，包括调用情况、参数和返回值以及上下文的测试方法，并且给出了一个完整的测试代码示例。通过使用 spy 功能，我们可以更加全面有效地进行单元测试，在保证代码质量的同时提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec3987f6b2d6eab367cdbc