我们在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函数我们可以通过以下三个特性去更好的编写我们的测试代码：