在编写前端代码时，我们经常需要测试某个函数的返回值或调用次数。此时，Jest 框架中提供了一个非常方便的方法 spyOn，可以轻松地对函数进行监听和测试。
什么是 spyOn?
spyOn 是 Jest 框架中提供的一个测试工具，用于监听函数的调用情况，以及对函数进行断言。
你可以用它来监听一些函数的调用次数、参数、返回值等信息，也可以通过它来模拟某些函数返回的结果，以达到测试的目的。
如何使用 spyOn？
假设我们有下面这个简单的函数：
function add(a, b) {
return a + b;
}我们想测试它是否符合预期，具体操作如下：
监听函数调用
我们可以使用 spyOn 监听函数的调用次数，比如测试该函数在被调用时是否只被执行了一次：
test('the add function should be called once', () => {
const realAdd = add;
const addSpy = jest.spyOn(add, 'add');
const result = realAdd(1, 2);
expect(addSpy).toHaveBeenCalledTimes(1);
});在这个例子中，我们通过 spyOn 把 add 函数进行了监听，并设置了一个参数，这个参数指定了我们要测试的是哪个对象的哪个函数。
而 hasBeenCalledTimes() 则是 Jest 提供的一个工具函数，用于测试某个函数的被调用次数是否符合预期。
监听返回值
在某些情况下，我们需要监听函数的返回值是否符合预期。例如：
test('the add function should return the right result', () => {
const result = add(1, 2);
expect(result).toBe(3);
});这个测试用例中，我们先调用 add 函数，然后对它的返回值进行断言，判断它返回的结果是否和我们期望的结果一样。
模拟函数返回值
在某些情况下，我们需要对函数进行模拟，以测试某些特殊情况。例如：
-- -------------------- ---- ------- --------- --- -------- ------ ------ --- ----- ------ ---- --- --------- -- ----- -- -- - ----- ------- - ---- ----- ------ - ---- ----- ------ - ---- ----- ------------ - ------------ ----- ------ - --------------- ------------------------------------- ----- ------ - --------------- -------- ------------------------------------------- -------- ------------------------------------- ---
在这个测试用例中，我们模拟了 add 函数的返回值，并设置了两个输入值，即两个 NaN。在调用 add 函数之后，我们使用 toHaveBeenCalledWith() 断言确保这个函数被调用时，输入值正确。而 mockReturnValue() 则会让这个函数的返回值变成我们指定的 expectResult。
总结
Jest 框架是一款非常优秀的 JavaScript 测试框架，通过使用 spyOn() 方法，可以方便地进行函数的监听和测试。在测试前端代码时，这个工具是非常必要的。无论是监听返回值，还是调用次数或者参数，Jest 都可以一步步帮助我们完成测试。对于前端工程师而言，这是一个非常好的学习和掌握工具，毫无疑问，它能够让我们更有效率的开发前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497d11c48841e98944d7341