在前端开发中，单元测试是非常重要的一部分。Jest 是一个非常流行的 JavaScript 测试框架，它提供了许多有用的函数和工具来帮助我们编写高质量的测试代码。在 Jest 中，有两个非常常用的函数：jest.fn() 和 jest.spyOn()。
jest.fn()
jest.fn() 是一个可以用来创建一个模拟函数的函数。模拟函数是一个在测试中替代真实函数的函数，它可以被用来验证函数被调用的次数、参数等信息。这个函数可以接受任何参数，并且可以返回任何值。
以下是一个示例：
const mockFn = jest.fn();
mockFn('hello', 'world');
mockFn(1, 2, 3);
console.log(mockFn.mock.calls);
// Output: [ [ 'hello', 'world' ], [ 1, 2, 3 ] ]在这个示例中，我们创建了一个名为 mockFn 的模拟函数，并且调用了两次。我们可以通过 mockFn.mock.calls 属性来获取函数的调用信息，该属性是一个数组，其中每个元素都包含了函数调用时传递的参数。
jest.spyOn()
jest.spyOn() 函数是一个更加高级的函数，它可以用来监视一个对象的方法。当我们使用 jest.spyOn() 函数来监视一个对象的方法时，Jest 会创建一个模拟函数来替代真实的方法。这个模拟函数会记录所有的调用信息，并且可以被用来验证函数是否被调用、调用次数、参数等信息。
以下是一个示例：
// javascriptcn.com 代码示例
const obj = {
add(a, b) {
return a + b;
}
};
const spy = jest.spyOn(obj, 'add');
console.log(obj.add(1, 2));
// Output: 3
console.log(spy.mock.calls);
// Output: [ [ 1, 2 ] ]在这个示例中，我们创建了一个名为 obj 的对象，并且监视了它的 add 方法。我们调用了 obj.add(1, 2) 方法，并且通过 spy.mock.calls 属性来获取函数的调用信息。
区别
虽然 jest.fn() 和 jest.spyOn() 都可以用来创建模拟函数，但是它们之间有一些重要的区别：
jest.fn()可以用来创建一个独立的模拟函数，而jest.spyOn()只能用来监视一个对象的方法。jest.fn()返回的是一个完全独立的模拟函数，而jest.spyOn()返回的是一个与真实函数相关联的模拟函数。jest.fn()可以用来创建一个新的函数，并且可以传递任何参数，而jest.spyOn()只能用来监视已经存在的函数。
总结
在 Jest 中，jest.fn() 和 jest.spyOn() 都是非常有用的函数，它们可以帮助我们编写高质量的测试代码。虽然它们之间有一些区别，但是它们都可以用来创建模拟函数，并且可以被用来验证函数的调用信息。在实际开发中，我们需要根据具体的情况来选择使用哪个函数。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655ac0c7d2f5e1655d4f4d63