摘要：概述在我們進行單元測試的過程中，如果我們需要對一些接口進行相關的業務測試，那么我們就需要來模擬請求的發送與響應，否則我們就無法完成測試的閉環。我們再通過記錄的數據，組合其他的單元測試框架來對業務代碼進行測試。

在我們進行單元測試的過程中，如果我們需要對一些HTTP接口進行相關的業務測試，那么我們就需要來模擬HTTP請求的發送與響應，否則我們就無法完成測試的閉環。

目前，有許許多多的測試框架都提供了模擬HTTP請求相關的一些流程功能，我們在這邊文章中將會講到的，就是我們在上一篇關于單元測試的博客提高代碼質量——使用Jest和Sinon給已有的代碼添加單元測試中提到的Sinon中引用的HTTP模擬框架nise。

本文的目標是讓讀者能夠通過這篇文章，知道一個成熟的測試框架是如何來模擬一個HTTP的實現，并且與業務代碼進行結合，輔助進行測試。本文內容相對較為簡單，基本沒有難度，作為一個知識面擴充建議讀者快速略讀。

通過本文，你可以了解以下內容：

nise是什么？

nise的設計思路是怎么樣？

nise是如何與業務代碼結合，輔助測試？

fake XHR and Server.

nise在Github上面的介紹很簡單，雖然只有四個單詞，但是卻很精確的說明了這個庫的含義——構造一個模擬的XHR和Server對象，用來替換原生的對象用來滿足測試需求。

它是Sinon.js的一部分，用來處理HTTP相關測試問題。

該庫提供了替換原生的XHR對象和Server相關的接口，但是我們在本文中只介紹關于XHR部分，也就是瀏覽器中的XHR對象的替換。該部分位于倉庫中/lib/fake-xhr/index.js中，下文中提到的nise如果沒有特別注明，均表示nise中的XHR。

想要了解nise的設計思路，我們就需要先看下nise的使用方法。

目前，nise提供了以下三個API接口：

module.exports = {
    xhr: sinonXhr, // 用來存儲原來的XHR對象和一些環境判斷屬性
    FakeXMLHttpRequest: FakeXMLHttpRequest, // XHR對象構造函數
    useFakeXMLHttpRequest: useFakeXMLHttpRequest //調用后，使用fake XHR對象替換全局，并返回一個帶有restore方法的fake XHR對象構造函數
};

我們在使用時，只需調用userFakeXMLHttpRequest方法，即可將原生的XHR對象替換成nise提供的XHR對象。在測試完成后，我們再調用返回的restore方法，這樣我們就恢復了原生的XHR對象。

返回的模擬HXR對象還有部分API接口可以調用，這部分我們將在下一節——nise結構中進行介紹。

// 構造函數，用來存儲請求相關的數據如請求狀態、請求頭等
function FakeXMLHttpRequest(config) {
    EventTargetHandler.call(this);
    this.readyState = FakeXMLHttpRequest.UNSENT; // 原生屬性，用來標識請求狀態
    this.requestHeaders = {}; // 記錄請求headers屬性
    this.requestBody = null; // 記錄請求body屬性
    this.status = 0;
    this.statusText = "";
    this.upload = new EventTargetHandler(); // 上傳事件屬性
    this.responseType = ""; // 響應類型屬性
    this.response = ""; // 響應內容屬性
    this.logError = configureLogError(config);

    if (sinonXhr.supportsTimeout) {
        this.timeout = 0;
    }

    if (sinonXhr.supportsCORS) {
        this.withCredentials = false;
    }

    if (typeof FakeXMLHttpRequest.onCreate === "function") {
        FakeXMLHttpRequest.onCreate(this);
    }
}

FakeXMLHttpRequest.useFilters = false;

FakeXMLHttpRequest.addFilter = function addFilter(fn) {} // 增加過濾函數

FakeXMLHttpRequest.defake = function defake(fakeXhr, xhrArgs) {} // 將常用事件如open、send等XHR的方法綁定到模擬的XHR對象上

FakeXMLHttpRequest.parseXML = function parseXML(text) {} // 解析XML

extend(FakeXMLHttpRequest.prototype, sinonEvent.EventTarget, {
    open: function open(method, url, async, username, password) {} // XHR原生方法模擬
    
    readyStateChange: function readyStateChange(state) {} // XHR原生方法模擬
    
    setRequestHeader: function setRequestHeader(header, value) {} // 設置請求header并保存到requestHeaders屬性中
    
    setStatus: function setStatus(status) {} // 設置status并保存到status屬性中
    
    setResponseHeaders: function setResponseHeaders(headers) {} // 設置響應headers并跟隨callback一起返回
    
    send: function send(data) {} // XHR原生方法模擬
    
    abort: function abort() {} // 終止HTTP請求
    
    error: function () {} // XHR原生方法模擬
    
    triggerTimeout: function triggerTimeout() {} // 觸發超時
    
    getResponseHeader: function getResponseHeader(header) {} // 獲取響應header
    
    getAllResponseHeaders: function getAllResponseHeaders() {} // 獲取全部的響應headers
    
    setResponseBody: function setResponseBody(body) {} // 設置響應內容
    
    respond: function respond(status, headers, body) {} // 觸發請求的callback函數
    
    uploadProgress: function uploadProgress(progressEventRaw) {} // 上傳進度觸發事件
    
    downloadProgress: function downloadProgress(progressEventRaw) {} // 下載進度觸發事件
    
    uploadError: function uploadError(error) {} // 上傳失敗觸發事件
    
    overrideMimeType: function overrideMimeType(type) {} // 覆蓋mineType
});

通過上面的源碼介紹我們可以知道：nise是通過完全模擬一個模擬的XHR對象，然后再使用這個模擬的XHR對象來替換全局的XHR對象。

而我們在進行HTTP相關測試時，參數是由我們傳入的，因此不需要進行驗證。所以我們最終需要驗證的其實是callback中的處理邏輯和結果。因此，我們可以通過以下一個示例來看下它如何與業務代碼進行結合。這個示例是在上一篇博客中出現過的示例：

test("user", () => {
    let callback = jest.fn();

    HTTPCommon.deleteRemoteSession({
        data: {},
        success: callback
    });

    expect(requests.length).toBe(1);

    requests[0].respond(200, {"Content-Type": "application/json"}, "hjava"); // 模擬返回值

    expect(callback.mock.calls[0][0]).toBe("hjava");
});

通過respond這個方法，fakeXMLHttpRequest對象觸發了callback函數，并且將指定數據傳遞到業務代碼中。因此，我們能夠通過callback相關的業務邏輯來判斷我們的邏輯是否正常。

nise通過一個非常常規的方法——模擬一個XHR對象并且實現XHR對象的所有功能來完成針對HTTP請求進行記錄的功能。我們再通過nise記錄的數據，組合其他的單元測試框架來對業務代碼進行測試。

nise的源碼只有600余行，而且非常簡單易懂。我將原有代碼folk一份并加上了部分注釋，有興趣的同學可以看看，具體地址見此處。

Sinon.js

nise

我folk的nise