在本篇教程中，我们会介绍 Jest 中的三个与 Mock 函数相关的 API，分别是 jest.fn()、jest.spyOn()、jest.mock()。使用它们创建 Mock 函数能够帮助我们更好的测试项目中一些逻辑较复杂的代码，例如测试函数的嵌套调用，回调函数的调用等。
如果你还不知道 Jest 的基本使用方法，请先阅读:《使用 Jest 测试 JavaScript (入门篇)》
为什么要使用 Mock 函数？
在项目中，一个模块的方法内常常会去调用另外一个模块的方法。在单元测试中，我们可能并不需要关心内部调用的方法的执行过程和结果，只想知道它是否被正确调用即可，甚至会指定该函数的返回值。此时，使用 Mock 函数是十分有必要。
Mock 函数提供的以下三种特性，在我们写测试代码时十分有用：
捕获函数调用情况
设置函数返回值
改变函数的内部实现
我们接着使用上篇文章中的目录结构，在 test/functions.test.js 文件中编写测试代码，src/ 目录下写被测试代码。
1. jest.fn()
jest.fn() 是创建 Mock 函数最简单的方式，如果没有定义函数内部的实现，jest.fn() 会返回 undefined 作为返回值。
// functions.test.js
test(‘ 测试 jest.fn() 调用 ’, () => {
let mockFn = jest.fn();
let result = mockFn(1, 2, 3);
// 断言 mockFn 的执行后返回 undefined
expect(result).toBeUndefined();
// 断言 mockFn 被调用
expect(mockFn).toBeCalled();
// 断言 mockFn 被调用了一次
expect(mockFn).toBeCalledTimes(1);
// 断言 mockFn 传入的参数为 1, 2, 3
expect(mockFn).toHaveBeenCalledWith(1, 2, 3);
})
jest.fn() 所创建的 Mock 函数还可以设置返回值，定义内部实现或返回 Promise 对象。
// functions.test.js
test(‘ 测试 jest.fn() 返回固定值 ’, () => {
let mockFn = jest.fn().mockReturnValue(‘default’);
// 断言 mockFn 执行后返回值为 default
expect(mockFn()).toBe(‘default’);
})
test(‘ 测试 jest.fn() 内部实现 ’, () => {
let mockFn = jest.fn((num1, num2) => {
return num1 * num2;
})
// 断言 mockFn 执行后返回 100
expect(mockFn(10, 10)).toBe(100);
})
test(‘ 测试 jest.fn() 返回 Promise’, async () => {
let mockFn = jest.fn().mockResolvedValue(‘default’);
let result = await mockFn();
// 断言 mockFn 通过 await 关键字执行后返回值为 default
expect(result).toBe(‘default’);
// 断言 mockFn 调用后返回的是 Promise 对象
expect(Object.prototype.toString.call(mockFn())).toBe(“[object Promise]”);
})
上面的代码是 jest.fn() 提供的几个常用的 API 和断言语句，下面我们在 src/fetch.js 文件中写一些被测试代码，以更加接近业务的方式来理解 Mock 函数的实际应用。
被测试代码中依赖了 axios 这个常用的请求库和 JSONPlaceholder 这个上篇文章中提到免费的请求接口，请先在 shell 中执行 npm install axios –save 安装依赖，。
// fetch.js
import axios from ‘axios’;
export default {
async fetchPostsList(callback) {
return axios.get(‘https://jsonplaceholder.typicode.com/posts’).then(res => {
return callback(res.data);
})
}
}
我们在 fetch.js 中封装了一个 fetchPostsList 方法，该方法请求了 JSONPlaceholder 提供的接口，并通过传入的回调函数返回处理过的返回值。如果我们想测试该接口能够被正常请求，只需要捕获到传入的回调函数能够被正常的调用即可。下面是 functions.test.js 中的测试的代码。
import fetch from ‘../src/fetch.js’
test(‘fetchPostsList 中的回调函数应该能够被调用 ’, async () => {
expect.assertions(1);
let mockFn = jest.fn();
await fetch.fetchPostsList(mockFn);
// 断言 mockFn 被调用
expect(mockFn).toBeCalled();
})
2. jest.mock()
fetch.js 文件夹中封装的请求方法可能我们在其他模块被调用的时候，并不需要进行实际的请求（请求方法已经通过单侧或需要该方法返回非真实数据）。此时，使用 jest.mock(）去 mock 整个模块是十分有必要的。
下面我们在 src/fetch.js 的同级目录下创建一个 src/events.js。
// events.js
import fetch from ‘./fetch’;
export default {
async getPostList() {
return fetch.fetchPostsList(data => {
console.log(‘fetchPostsList be called!’);
// do something
});
}
}
functions.test.js 中的测试代码如下：
// functions.test.js
import events from ‘../src/events’;
import fetch from ‘../src/fetch’;
jest.mock(‘../src/fetch.js’);
test(‘mock 整个 fetch.js 模块 ’, async () => {
expect.assertions(2);
await events.getPostList();
expect(fetch.fetchPostsList).toHaveBeenCalled();
expect(fetch.fetchPostsList).toHaveBeenCalledTimes(1);
});
在测试代码中我们使用了 jest.mock(‘../src/fetch.js’) 去 mock 整个 fetch.js 模块。如果注释掉这行代码，执行测试脚本时会出现以下报错信息
从这个报错中，我们可以总结出一个重要的结论：
在 jest 中如果想捕获函数的调用情况，则该函数必须被 mock 或者 spy！
3. jest.spyOn()
jest.spyOn() 方法同样创建一个 mock 函数，但是该 mock 函数不仅能够捕获函数的调用情况，还可以正常的执行被 spy 的函数。实际上，jest.spyOn() 是 jest.fn() 的语法糖，它创建了一个和被 spy 的函数具有相同内部代码的 mock 函数。
上图是之前 jest.mock() 的示例代码中的正确执行结果的截图，从 shell 脚本中可以看到 console.log(‘fetchPostsList be called!’); 这行代码并没有在 shell 中被打印，这是因为通过 jest.mock() 后，模块内的方法是不会被 jest 所实际执行的。这时我们就需要使用 jest.spyOn()。
// functions.test.js
import events from ‘../src/events’;
import fetch from ‘../src/fetch’;
test(‘ 使用 jest.spyOn() 监控 fetch.fetchPostsList 被正常调用 ’, async() => {
expect.assertions(2);
const spyFn = jest.spyOn(fetch, ‘fetchPostsList’);
await events.getPostList();
expect(spyFn).toHaveBeenCalled();
expect(spyFn).toHaveBeenCalledTimes(1);
})
执行 npm run test 后，可以看到 shell 中的打印信息，说明通过 jest.spyOn()，fetchPostsList 被正常的执行了。
4. 总结
这篇文章中我们介绍了 jest.fn(),jest.mock() 和 jest.spyOn() 来创建 mock 函数，通过 mock 函数我们可以通过以下三个特性去更好的编写我们的测试代码：
捕获函数调用情况
设置函数返回值
改变函数的内部实现
在实际项目的单元测试中，jest.fn() 常被用来进行某些有回调函数的测试；jest.mock() 可以 mock 整个模块中的方法，当某个模块已经被单元测试 100% 覆盖时，使用 jest.mock() 去 mock 该模块，节约测试时间和测试的冗余度是十分必要；当需要测试某些必须被完整执行的方法时，常常需要使用 jest.spyOn()。这些都需要开发者根据实际的业务代码灵活选择。