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

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

如果你還不知道Jest的基本使用方法，請先閱讀: 《使用Jest測試JavaScript (入門篇)》

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

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

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

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

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

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

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

// functions.test.js

test("測試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對象。

// functions.test.js

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

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

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

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

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

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文件夾中封裝的請求方法可能我們在其他模塊被調(diào)用的時(shí)候，并不需要進(jìn)行實(shí)際的請求（請求方法已經(jīng)通過單側(cè)或需要該方法返回非真實(shí)數(shù)據(jù)）。此時(shí)，使用jest.mock(）去mock整個(gè)模塊是十分有必要的。

下面我們在src/fetch.js的同級目錄下創(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中的測試代碼如下：

// 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);
});

在測試代碼中我們使用了jest.mock("../src/fetch.js")去mock整個(gè)fetch.js模塊。如果注釋掉這行代碼，執(zhí)行測試腳本時(shí)會出現(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()的語法糖，它創(chuàng)建了一個(gè)和被spy的函數(shù)具有相同內(nèi)部代碼的mock函數(shù)。

上圖是之前jest.mock()的示例代碼中的正確執(zhí)行結(jié)果的截圖，從shell腳本中可以看到console.log("fetchPostsList be called!");這行代碼并沒有在shell中被打印，這是因?yàn)橥ㄟ^jest.mock()后，模塊內(nèi)的方法是不會被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中的打印信息，說明通過jest.spyOn()，fetchPostsList被正常的執(zhí)行了。

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

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

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

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

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