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

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

Enzyme 是 React 的測試類庫。 Enzyme 提供了一套簡潔強(qiáng)大的 API，并通過 jQuery 風(fēng)格的方式進(jìn)行DOM 處理，開發(fā)體驗(yàn)十分友好。

首先，使用npm安裝Jest

    npm install --save-dev jest

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

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

此處sort方法未對入?yún)⒆鲱愋蜋z測

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

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

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

打開package.json,在scripts中新增

    test: "jest"

然后運(yùn)行命令

    npm run test

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

由于我們的方法沒有做入?yún)㈩愋蜋z測，下面通過傳入字符串，來測試異常情況。在sort.test.js中新增一個(gè)測試用例用例

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

運(yùn)行，則會看到測試失敗的信息

從測試結(jié)果中我們可以清除的看到，運(yùn)行來兩個(gè)測試用例，第一個(gè)用例通過來，第二個(gè)用例運(yùn)行是js出現(xiàn)了報(bào)錯(cuò)。此時(shí)便能根據(jù)測試結(jié)果，調(diào)整代碼

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

下面來在實(shí)際的項(xiàng)目中使用Jest + Enzyme來進(jìn)行測試。測試Demo項(xiàng)目

首先，使用Create-React-App來創(chuàng)建一個(gè)應(yīng)用。

接著，安裝jest

    npm install --save-dev jest

由于在書寫用例時(shí)，會用到es6語法，所以還要安裝babel-jest來進(jìn)行轉(zhuǎn)碼

    npm install --save-dev babel-jest

安裝enzyme

    npm install --save-dev enzyme

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

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

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

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

依賴安裝完成，接下來需要進(jìn)行相關(guān)的配置。

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

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

首先，我們在package.json文件中新增一個(gè)jest的配置項(xiàng)

    jest: {}

這里我們主要進(jìn)行三個(gè)配置。

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

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

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

jest默認(rèn)會檢索項(xiàng)目內(nèi)的*.test.js,*.test.jsx形式的文件并執(zhí)行。當(dāng)編寫當(dāng)用例沒被jest檢索到時(shí)，可通過moduleDirectories來配置路徑。

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

    ".(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"

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

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

    
    module.exports = {};

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

    "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"
        }
  }

接下來創(chuàng)建一個(gè)待測試的組件，在src > pages文件夾中創(chuàng)建login組件，并配置好路由。組件代碼參考測試Demo項(xiàng)目
運(yùn)行后頁面如下

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

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

2、登錄賬號輸入手機(jī)號或郵箱時(shí)，賬號上方顯示登錄賬號

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

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

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

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

7、點(diǎn)擊密碼后眼睛圖標(biāo)，顯示密碼。

8、顯示密碼狀態(tài)，再次點(diǎn)擊，隱藏密碼。

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

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

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

mount方法用于將React組件加載為真實(shí)DOM節(jié)點(diǎn)。

三種方法中，shallow render 返回的為對象，用于分析HTML結(jié)構(gòu)，所以無法用于交互測試。mount方法加載的為真實(shí)的DOM節(jié)點(diǎn)，所以可用于交互測試。本Login組件存在大量交互測試，所以使用mount創(chuàng)建組件,使用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();

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

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

完整API參見 Enzyme API

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

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

來編寫測試用例，這樣我們可以對測試用例進(jìn)行分組

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

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

這個(gè)用例十分簡單，僅僅在第一步獲取到了title中的文本，并對文本進(jìn)行校驗(yàn)。

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

    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("賬戶輸入錯(cuò)誤，請重新輸入");
  })

模擬輸入來一個(gè)不合法的賬號‘a(chǎn)bc123’，驗(yàn)證失敗，顯示失敗信息。

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

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

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

    it("輸入正確賬號，密碼小于6位，通過change觸發(fā)", () => {
    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兩個(gè)用例使用但方法與上面相同，不再贅述。

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

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

    test: "jest --coverage"

執(zhí)行 npm run test即可在用例執(zhí)行信息后顯示用例的覆蓋率報(bào)告。