在前端开发中，测试是不可或缺的一环。Jest 是一个流行的 JavaScript 测试框架，它提供了丰富的 API 来方便我们编写测试代码。其中，spyOn 是一个非常实用的函数，可以用来监视一个函数的调用情况，以便我们在测试中对其进行断言。
spyOn 的基本用法
在 Jest 中使用 spyOn 很简单，只需要在测试代码中调用 spyOn 函数，传入要监视的对象和方法名即可。例如，我们有一个名为 add 的函数：
function add(x, y) {
return x + y;
}现在我们想要监视这个函数的调用情况，可以这样写测试代码：
test('test add function', () => {
const mockFn = jest.spyOn(window, 'add');
const result = add(1, 2);
expect(mockFn).toHaveBeenCalled();
expect(mockFn).toHaveBeenCalledWith(1, 2);
expect(result).toBe(3);
});上面的测试代码中，我们先调用 spyOn 函数，传入 window 对象和 add 方法名，得到一个 mock 函数。然后调用 add 函数，再分别对 mock 函数的调用情况和 add 函数的返回值进行断言。
spyOn 的高级用法
除了基本的用法外，spyOn 还提供了一些高级用法，可以更加灵活地监视函数的调用情况。
1. 监视一个对象的所有方法
如果我们想监视一个对象的所有方法，可以使用 spyOn 对象的 spyOnAllMethods 方法。例如，我们有一个名为 math 的对象：
const math = {
add(x, y) {
return x + y;
},
subtract(x, y) {
return x - y;
}
};现在我们想要监视这个对象的所有方法的调用情况，可以这样写测试代码：
// javascriptcn.com 代码示例
test('test math object', () => {
const mockMath = jest.spyOn(math, 'add').mockImplementation(() => 10);
const result1 = math.add(1, 2);
const result2 = math.subtract(3, 2);
expect(mockMath).toHaveBeenCalled();
expect(mockMath).toHaveBeenCalledWith(1, 2);
expect(result1).toBe(10);
expect(result2).toBe(1);
});上面的测试代码中，我们先调用 spyOn 方法，传入 math 对象和 add 方法名，得到一个 mock 函数。然后使用 mockImplementation 方法将 mock 函数的返回值设置为 10。接着调用 math 对象的两个方法，再分别对 mock 函数的调用情况和方法的返回值进行断言。
2. 监视一个异步函数
如果我们想监视一个异步函数的调用情况，可以使用 spyOn 对象的 mockResolvedValue 或 mockRejectedValue 方法。例如，我们有一个名为 fetchData 的异步函数：
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}现在我们想要监视这个异步函数的调用情况，可以这样写测试代码：
test('test fetchData function', async () => {
const mockFn = jest.spyOn(window, 'fetchData').mockResolvedValue({ name: 'Alice' });
const result = await fetchData();
expect(mockFn).toHaveBeenCalled();
expect(result).toEqual({ name: 'Alice' });
});上面的测试代码中，我们先调用 spyOn 方法，传入 window 对象和 fetchData 方法名，得到一个 mock 函数。然后使用 mockResolvedValue 方法将 mock 函数的返回值设置为 { name: 'Alice' }。接着调用 fetchData 函数，再对 mock 函数的调用情况和函数的返回值进行断言。
总结
使用 spyOn 可以方便地监视一个函数的调用情况，从而更加轻松地编写测试代码。除了基本的用法外，还可以使用 spyOnAllMethods 方法和 mockResolvedValue/mockRejectedValue 方法进行更加灵活的监视。在编写测试代码时，我们应该根据具体情况选择适合的监视方法，以便更加高效地编写测试用例。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6566ef17d2f5e1655dfdbf5a