摘要：簡介是發布的一個開源的基于框架的單元測試工具。具體版本對照如下版本版本此處使用的版本為，所以我們需要安裝依賴安裝完成，接下來需要進行相關的配置。這樣就可以將測試集中在組件的結構和邏輯上。

Jest 是 Facebook 發布的一個開源的、基于 Jasmine 框架的 JavaScript 單元測試工具。

Enzyme 是 React 的測試類庫。 Enzyme 提供了一套簡潔強大的 API，并通過 jQuery 風格的方式進行DOM 處理，開發體驗十分友好。

首先，使用npm安裝Jest

    npm install --save-dev jest

在目錄下新建一個待測試文件 sort.js。

    function sort(sortArr) {
        return sortArr.sort((a, b) => a - b);
    }
    module.exports = sort;

此處sort方法未對入參做類型檢測

在這里定義了一個數組排序方法，下面來書寫其測試用例，在目錄下新建一個sort.test.js文件。

    const sort = require("./sort");
    const arr = [5,2,4,3,1];
    test("排序數組[5,2,4,3,1]", () => {
        expect(sort(arr)).toEqual([1,2,3,4,5]);
    })

在用例中，我們先引入了待測試的方法，接下來定義了一個排序數組[5,2,4,3,1]的測試用例.test()用來定義一個測試用例，expect()會執行內部的方法，返回一個待測試的結果。toEqual()用來判斷返回的結果于期望的結果是否相等。這里由于期望返回結果為數組，所以使用toEqual進行判斷，除此之外，還有toBe(),toBeNull()等方法來比較不同的類型。更多內容...

打開package.json,在scripts中新增

    test: "jest"

然后運行命令

    npm run test

會看到用例測試通過的信息

由于我們的方法沒有做入參類型檢測，下面通過傳入字符串，來測試異常情況。在sort.test.js中新增一個測試用例用例

    test("排序字符串“52431”", () => {
        expect(sort("52431")).toEqual(12345);
    })

運行，則會看到測試失敗的信息

從測試結果中我們可以清除的看到，運行來兩個測試用例，第一個用例通過來，第二個用例運行是js出現了報錯。此時便能根據測試結果，調整代碼

更多測試方法此處不做討論，具體可以參考Jest文檔

下面來在實際的項目中使用Jest + Enzyme來進行測試。測試Demo項目

首先，使用Create-React-App來創建一個應用。

接著，安裝jest

    npm install --save-dev jest

由于在書寫用例時，會用到es6語法，所以還要安裝babel-jest來進行轉碼

    npm install --save-dev babel-jest

安裝enzyme

    npm install --save-dev enzyme

也可以使用react官方測試插件react-addons-test-utils，此處我們使用enzyme，故不需要安裝。

此外，還需要根據使用的react版本來安裝enzyme-adapter-react。具體版本對照如下

此處demo使用的react版本為^16.4.1，所以我們需要安裝enzyme-adapter-react-16

    npm install --save-dev enzyme-adapter-react-16

依賴安裝完成，接下來需要進行相關的配置。

首先配置package.json的測試命令test: "jest"。

此時如果我們在根目錄下創建一個.test.js文件，并書寫簡單的方法用例，執行測試命令，是可以正常執行測試用例的。但是，我們的項目卻并不是簡單的單個方法但測試，實際項目中會存在這大量的組件依賴，還有css，image等靜態資源的處理。所以，還要進行如下配置處理。

首先，我們在package.json文件中新增一個jest的配置項

    jest: {}

這里我們主要進行三個配置。

moduleFileExtensions代表支持加載的文件名。此處我們的測試文件均以.js結尾，所以只配置成["js"]即可

transform用于編譯 ES6/ES7 語法，需配合 babel-jest 使用

moduleNameMapper代表需要被 Mock 的資源名稱。如果需要 Mock 靜態資源（如less、scss等），則需要配置 Mock 的路徑

jest默認會檢索項目內的*.test.js,*.test.jsx形式的文件并執行。當編寫當用例沒被jest檢索到時，可通過moduleDirectories來配置路徑。

在具體到組件測試時，為了測試組件到交互性，我們需要jest渲染出組件進行操作，此時，由于我們到項目中大量使用來webpack到依賴管理，以及less-loader、url-loader等預編譯。在jest渲染組件是，無法識別這些.less等文件。所以我們需要通過mock來處理這些靜態文件。因為jest在渲染組件時，是不需要依賴css,image等靜態資源的。所以我們可以這樣配置：

    ".(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js",
    ".(css|less)$": "/__mocks__/styleMock.js"

前面通過正則來適配我們需要匹配的靜態文件，后面為我們通過mock返回的數據。這里我們還需要在根目錄中創建__mock__的文件夾。在里面新建fileMock.js和styleMock.js兩個文件。

    
    module.exports = "test-file-stub";

    
    module.exports = {};

這樣就可以將測試集中在組件的結構和邏輯上。另外，可能在我們的項目中，會使用大量的別名來簡化引用路徑，及webpack中的alias配置。此處同樣需要進行別名的配置，配置方式與靜態資源配置類似。一下是完整配置

    "jest": {
        "moduleFileExtensions": [
            "js",
            "jsx"
        ],
        "moduleDirectories": [
            "src",
            "node_modules"
        ],
        "transform": {
            "^.+.js$": "babel-jest"
        },
        "moduleNameMapper": {
            "^components(.*)$": "/src/components$1",
            "^pages(.*)$": "/src/pages$1",
            "^utils(.*)$": "/src/utils$1",
            "^services(.*)$": "/src/services$1",
            "^static(.*)$": "/src/static$1",
            "^models(.*)$": "/src/models$1",
            "^variable(.*)$": "//src/static/less/variable.less",
            ".(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js",
            ".(css|less)$": "/__mocks__/styleMock.js"
        }
  }

接下來創建一個待測試的組件，在src > pages文件夾中創建login組件，并配置好路由。組件代碼參考測試Demo項目
運行后頁面如下

接著，定義測試用例，此Demo定義來八個測試用例如下

1、頁面title顯示“登錄”（UI）

2、登錄賬號輸入手機號或郵箱時，賬號上方顯示登錄賬號

3、登錄賬號輸入不為手機號或郵箱，賬號上方顯示【賬戶輸入錯誤，請重新輸入】

4、賬號輸入正常，密碼小于6位，登錄按鈕置灰。

5、賬號輸入異常，密碼不小于6位，登錄按鈕置灰。

6、賬號輸入正常，密碼不小于6位，登錄按鈕可點。

7、點擊密碼后眼睛圖標，顯示密碼。

8、顯示密碼狀態，再次點擊，隱藏密碼。

接下來，新建文件login.test.js來編寫測試用例代碼。
由于用例中設計多個交互，所以我們需要先渲染出組件。Enzyme為我們提供來三種渲染組件的方法shallow、render、mount。

shallow 方法就是官方的shallow rendering的封裝。

render 方法將React組件渲染成靜態的HTML字符串，然后分析這段HTML代碼的結構，返回一個對象。它跟shallow方法非常像，主要的不同是采用了第三方HTML解析庫Cheerio，它返回的是一個Cheerio實例對象。

mount方法用于將React組件加載為真實DOM節點。

三種方法中，shallow render 返回的為對象，用于分析HTML結構，所以無法用于交互測試。mount方法加載的為真實的DOM節點，所以可用于交互測試。本Login組件存在大量交互測試，所以使用mount創建組件,使用mount需要先使用Adapter配置如下

    import Login from "pages/Login";
    import React from "react";
    import { configure } from "enzyme";
    import Adapter from "enzyme-adapter-react-16";
    import { mount } from "enzyme";
    configure({ adapter: new Adapter() });
    
    const wrapper = mount();

現在，我們就可以使用Enzyme的API來編寫測試用例了，Enzyme提供了豐富的類jquery風格的API，下面是部分API

    .get(index)：返回指定位置的子組件的DOM節點
    .at(index)：返回指定位置的子組件
    .first()：返回第一個子組件
    .last()：返回最后一個子組件
    .type()：返回當前組件的類型
    .text()：返回當前組件的文本內容
    .html()：返回當前組件的HTML代碼形式
    .props()：返回根組件的所有屬性
    .prop(key)：返回根組件的指定屬性
    .state([key])：返回根組件的狀態
    .setState(nextState)：設置根組件的狀態
    .setProps(nextProps)：設置根組件的屬性

完整API參見 Enzyme API

在前半部分的demo中，我們使用來 test() 方法來編寫用例，此處，我們使用

    describe("", () => {
        it("", () => {})
    })

來編寫測試用例，這樣我們可以對測試用例進行分組

讓我們來開始第一個用例“頁面title顯示「登錄」”的編寫

    it("標題顯示", () => {
        const title = wrapper.find(".title").text();
        expect(title).toBe("登錄");
    })

這個用例十分簡單，僅僅在第一步獲取到了title中的文本，并對文本進行校驗。

第二個和第三個用例為對輸入框輸入文本對校驗，此處，我們可以多帶帶對校驗方法進行測試，也可以頁面對交互來完成測試。這里用例通過交互來進行測試用例對編寫。由于在輸入信息過程中，校驗通過input框的onChange事件觸發，所以我們需要用到 simulate 來觸發事件。其中一個用例如下

    const accountInput = wrapper.find(".account").find("input");
    const accountTitle = wrapper.find(".account .name").find("span");
    it("輸入不合法賬號", () => {
        const event = {
            target: {
            value: "abc123"
        }
    }
    accountInput.simulate("change", event);
    expect(accountTitle.text()).toBe("賬戶輸入錯誤，請重新輸入");
  })

模擬輸入來一個不合法的賬號‘abc123’，驗證失敗，顯示失敗信息。

在4，5，6三個用例中，需要獲取登錄按鈕Button組件的可點擊狀態，由于enzyme無法獲取 css 狀態，此時可以使用API中的prop(key)來獲取組件的props狀態，從而判斷組件的可點擊狀態。其中一個用例如下

    it("輸入正確賬號，密碼小于6位，指定狀態", () => {
    wrapper.setState({
      account: "18888888888",
      password: "12345",
      errorAccount: false
    });
    // 此處需重新獲取btn對象，否則會導致用例失敗
    const submitBtn = wrapper.find(".btn-box").find("Button");
    expect(submitBtn.props().disabled).toBe(true);
  })

此處通過直接設置state的值來更改Button的狀態。需要注意的是，為來減少重復定義，許多Dom對象的獲取都在describe組下做了統一的定義，但在執行expect獲取按鈕狀態是，需要重新查找，來獲取最新但狀態。除了直接指定state狀態之外，還可以通過輸入框輸入，change事件觸發但方式來完成用例，如下

    it("輸入正確賬號，密碼小于6位，通過change觸發", () => {
    const accountEvent = {
      target: {
        value: "18888888888"
      }
    };
    const pwdEvent = {
      target: {
        value: "12345"
      }
    }
    accountInput.simulate("change", accountEvent);
    passwordInput.simulate("change", pwdEvent);
    const submitBtn = wrapper.find(".btn-box").find("Button");
    expect(submitBtn.prop("disabled")).toBe(true);

7、8兩個用例使用但方法與上面相同，不再贅述。

所有用例編寫完成之后，執行npm run test可以看到所有用例都通過測試。

在 package.json 文件的 test 命令修改為

    test: "jest --coverage"

執行 npm run test即可在用例執行信息后顯示用例的覆蓋率報告。