摘要：測(cè)試調(diào)用斷言的執(zhí)行后返回?cái)嘌员徽{(diào)用斷言被調(diào)用了一次斷言傳入的參數(shù)為所創(chuàng)建的函數(shù)還可以設(shè)置返回值，定義內(nèi)部實(shí)現(xiàn)或返回對(duì)象。

在本篇教程中，我們會(huì)介紹 Jest 中的三個(gè)與 Mock 函數(shù)相關(guān)的API，分別是jest.fn()、jest.spyOn()、jest.mock()。使用它們創(chuàng)建Mock函數(shù)能夠幫助我們更好的測(cè)試項(xiàng)目中一些邏輯較復(fù)雜的代碼，例如測(cè)試函數(shù)的嵌套調(diào)用，回調(diào)函數(shù)的調(diào)用等。

如果你還不知道Jest的基本使用方法，請(qǐng)先閱讀: 《使用Jest測(cè)試JavaScript (入門(mén)篇)》

在項(xiàng)目中，一個(gè)模塊的方法內(nèi)常常會(huì)去調(diào)用另外一個(gè)模塊的方法。在單元測(cè)試中，我們可能并不需要關(guān)心內(nèi)部調(diào)用的方法的執(zhí)行過(guò)程和結(jié)果，只想知道它是否被正確調(diào)用即可，甚至?xí)付ㄔ摵瘮?shù)的返回值。此時(shí)，使用Mock函數(shù)是十分有必要。

Mock函數(shù)提供的以下三種特性，在我們寫(xiě)測(cè)試代碼時(shí)十分有用：

捕獲函數(shù)調(diào)用情況

設(shè)置函數(shù)返回值

改變函數(shù)的內(nèi)部實(shí)現(xiàn)

我們接著使用上篇文章中的目錄結(jié)構(gòu)，在test/functions.test.js文件中編寫(xiě)測(cè)試代碼，src/目錄下寫(xiě)被測(cè)試代碼。

jest.fn()是創(chuàng)建Mock函數(shù)最簡(jiǎn)單的方式，如果沒(méi)有定義函數(shù)內(nèi)部的實(shí)現(xiàn)，jest.fn()會(huì)返回undefined作為返回值。

// functions.test.js

test("測(cè)試jest.fn()調(diào)用", () => {
  let mockFn = jest.fn();
  let result = mockFn(1, 2, 3);

  // 斷言mockFn的執(zhí)行后返回undefined
  expect(result).toBeUndefined();
  // 斷言mockFn被調(diào)用
  expect(mockFn).toBeCalled();
  // 斷言mockFn被調(diào)用了一次
  expect(mockFn).toBeCalledTimes(1);
  // 斷言mockFn傳入的參數(shù)為1, 2, 3
  expect(mockFn).toHaveBeenCalledWith(1, 2, 3);
})

jest.fn()所創(chuàng)建的Mock函數(shù)還可以設(shè)置返回值，定義內(nèi)部實(shí)現(xiàn)或返回Promise對(duì)象。

// functions.test.js

test("測(cè)試jest.fn()返回固定值", () => {
  let mockFn = jest.fn().mockReturnValue("default");
  // 斷言mockFn執(zhí)行后返回值為default
  expect(mockFn()).toBe("default");
})

test("測(cè)試jest.fn()內(nèi)部實(shí)現(xiàn)", () => {
  let mockFn = jest.fn((num1, num2) => {
    return num1 * num2;
  })
  // 斷言mockFn執(zhí)行后返回100
  expect(mockFn(10, 10)).toBe(100);
})

test("測(cè)試jest.fn()返回Promise", async () => {
  let mockFn = jest.fn().mockResolvedValue("default");
  let result = await mockFn();
  // 斷言mockFn通過(guò)await關(guān)鍵字執(zhí)行后返回值為default
  expect(result).toBe("default");
  // 斷言mockFn調(diào)用后返回的是Promise對(duì)象
  expect(Object.prototype.toString.call(mockFn())).toBe("[object Promise]");
})

上面的代碼是jest.fn()提供的幾個(gè)常用的API和斷言語(yǔ)句，下面我們?cè)?b>src/fetch.js文件中寫(xiě)一些被測(cè)試代碼，以更加接近業(yè)務(wù)的方式來(lái)理解Mock函數(shù)的實(shí)際應(yīng)用。

被測(cè)試代碼中依賴了axios這個(gè)常用的請(qǐng)求庫(kù)和JSONPlaceholder這個(gè)上篇文章中提到免費(fèi)的請(qǐng)求接口，請(qǐng)先在shell中執(zhí)行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);
    })
  }
}

我們?cè)?b>fetch.js中封裝了一個(gè)fetchPostsList方法，該方法請(qǐng)求了JSONPlaceholder提供的接口，并通過(guò)傳入的回調(diào)函數(shù)返回處理過(guò)的返回值。如果我們想測(cè)試該接口能夠被正常請(qǐng)求，只需要捕獲到傳入的回調(diào)函數(shù)能夠被正常的調(diào)用即可。下面是functions.test.js中的測(cè)試的代碼。

import fetch from "../src/fetch.js"

test("fetchPostsList中的回調(diào)函數(shù)應(yīng)該能夠被調(diào)用", async () => {
  expect.assertions(1);
  let mockFn = jest.fn();
  await fetch.fetchPostsList(mockFn);

  // 斷言mockFn被調(diào)用
  expect(mockFn).toBeCalled();
})

fetch.js文件夾中封裝的請(qǐng)求方法可能我們?cè)谄渌K被調(diào)用的時(shí)候，并不需要進(jìn)行實(shí)際的請(qǐng)求（請(qǐng)求方法已經(jīng)通過(guò)單側(cè)或需要該方法返回非真實(shí)數(shù)據(jù)）。此時(shí)，使用jest.mock(）去mock整個(gè)模塊是十分有必要的。

下面我們?cè)?b>src/fetch.js的同級(jí)目錄下創(chuàng)建一個(gè)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中的測(cè)試代碼如下：

// functions.test.js

import events from "../src/events";
import fetch from "../src/fetch";

jest.mock("../src/fetch.js");

test("mock 整個(gè) fetch.js模塊", async () => {
  expect.assertions(2);
  await events.getPostList();
  expect(fetch.fetchPostsList).toHaveBeenCalled();
  expect(fetch.fetchPostsList).toHaveBeenCalledTimes(1);
});

在測(cè)試代碼中我們使用了jest.mock("../src/fetch.js")去mock整個(gè)fetch.js模塊。如果注釋掉這行代碼，執(zhí)行測(cè)試腳本時(shí)會(huì)出現(xiàn)以下報(bào)錯(cuò)信息

從這個(gè)報(bào)錯(cuò)中，我們可以總結(jié)出一個(gè)重要的結(jié)論：

在jest中如果想捕獲函數(shù)的調(diào)用情況，則該函數(shù)必須被mock或者spy！

jest.spyOn()方法同樣創(chuàng)建一個(gè)mock函數(shù)，但是該mock函數(shù)不僅能夠捕獲函數(shù)的調(diào)用情況，還可以正常的執(zhí)行被spy的函數(shù)。實(shí)際上，jest.spyOn()是jest.fn()的語(yǔ)法糖，它創(chuàng)建了一個(gè)和被spy的函數(shù)具有相同內(nèi)部代碼的mock函數(shù)。

上圖是之前jest.mock()的示例代碼中的正確執(zhí)行結(jié)果的截圖，從shell腳本中可以看到console.log("fetchPostsList be called!");這行代碼并沒(méi)有在shell中被打印，這是因?yàn)橥ㄟ^(guò)jest.mock()后，模塊內(nèi)的方法是不會(huì)被jest所實(shí)際執(zhí)行的。這時(shí)我們就需要使用jest.spyOn()。

// functions.test.js

import events from "../src/events";
import fetch from "../src/fetch";

test("使用jest.spyOn()監(jiān)控fetch.fetchPostsList被正常調(diào)用", async() => {
  expect.assertions(2);
  const spyFn = jest.spyOn(fetch, "fetchPostsList");
  await events.getPostList();
  expect(spyFn).toHaveBeenCalled();
  expect(spyFn).toHaveBeenCalledTimes(1);
})

執(zhí)行npm run test后，可以看到shell中的打印信息，說(shuō)明通過(guò)jest.spyOn()，fetchPostsList被正常的執(zhí)行了。

這篇文章中我們介紹了jest.fn(),jest.mock()和jest.spyOn()來(lái)創(chuàng)建mock函數(shù)，通過(guò)mock函數(shù)我們可以通過(guò)以下三個(gè)特性去更好的編寫(xiě)我們的測(cè)試代碼：

捕獲函數(shù)調(diào)用情況

設(shè)置函數(shù)返回值

改變函數(shù)的內(nèi)部實(shí)現(xiàn)

在實(shí)際項(xiàng)目的單元測(cè)試中，jest.fn()常被用來(lái)進(jìn)行某些有回調(diào)函數(shù)的測(cè)試；jest.mock()可以mock整個(gè)模塊中的方法，當(dāng)某個(gè)模塊已經(jīng)被單元測(cè)試100%覆蓋時(shí)，使用jest.mock()去mock該模塊，節(jié)約測(cè)試時(shí)間和測(cè)試的冗余度是十分必要；當(dāng)需要測(cè)試某些必須被完整執(zhí)行的方法時(shí)，常常需要使用jest.spyOn()。這些都需要開(kāi)發(fā)者根據(jù)實(shí)際的業(yè)務(wù)代碼靈活選擇。