使用Jest测试JavaScript(Mock篇)

在本篇教程中，咱们会介绍 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()。这些都须要开发者根据实际的业务代码灵活选择。