摘要：在前端進階之路前端架構設計測試核心這邊文章中通過分析了傳統手工測試的局限性去引出了測試驅動開發的理念并介紹了一些測試工具這篇文章我將通過一個的項目去講解如何使用且結合官方推薦的去進行單元測試的實戰一安裝我為本教程寫一個示例庫您可以直接

在《前端進階之路: 前端架構設計(3) - 測試核心》這邊文章中, 通過分析了"傳統手工測試的局限性" 去引出了測試驅動開發的理念, 并介紹了一些測試工具. 這篇文章我將通過一個Vue的項目, 去講解如何使用mocha & karma, 且結合vue官方推薦的vue-test-utils去進行單元測試的實戰.

我為本教程寫一個示例庫, 您可以直接跳過所有安裝過程, 安裝依賴后運行該示例項目:

如果想一步步進行安裝, 也可以跟著下面的步驟進行操作:

//命令行中輸入(默認閱讀該文章的讀者已經安裝vue-cli和node環境)
vue init webpack vueunittest

注意, 當詢問到這一步Pick a test runner(Use arrow keys)時, 請選擇使用Karma and Mocha

接下來的操作進入項目npm install安裝相關依賴后(該步驟可能更會出現PhantomJS這個瀏覽器安裝失敗的報錯, 不用理會, 因為 之后我們不使用這個瀏覽器), npm run build即可.

接下來安裝karma-chrome-launcher, 在命令行中輸入

npm install karma-chrome-launcher --save-dev

然后在項目中找到test/unit/karma.conf.js文件, 將PhantomJS瀏覽器修改為Chrome不要問我為什么不使用PhantomJS, 因為經常莫名的錯誤, 改成Chrome就不會!!!)

//karma.conf.js

var webpackConfig = require("../../build/webpack.test.conf")

module.exports = function (config) {
  config.set({
    //browsers: ["PhantomJS"],
    browsers: ["Chrome"],    
    
    ...
  })
}

安裝Vue.js 官方的單元測試實用工具庫, 在命令行輸入:

npm install --save-dev vue-test-utils

當你完成以上兩步的時候, 你就可以在命令行執行npm run unit嘗鮮你的第一次單元測試了, Vue腳手架已經初始化了一個HelloWorld.spec.js的測試文件去測試HelloWrold.vue, 你可以在test/unit/specs/HelloWorld.spec.js下找到這個測試文件.(提示: 將來所有的測試文件, 都將放specs這個目錄下, 并以測試腳本名.spec.js結尾命名!)

在命令行輸入npm run unit, 當你看到下圖所示的一篇綠的時候, 說明你的單元測試通過了!

下面是一個Counter.vue文件, 我將以該文件為基礎講解項目中測試工具的使用方法.

//Counter.vue

Mocha的作用是運行測試腳本, 要對上面Counter.vue進行測試, 我們就要寫測試腳本, 通常測試腳本應該與Vue組件名相同, 后綴為spec.js. 比如, Counter.vue組件的測試腳本名字就應該為Counter.spec.js

//Counter.spec.js

import Vue from "vue"
import Counter from "@/components/Counter"

describe("Counter.vue", () => {

  it("點擊按鈕后, count的值應該為1", () => {
    //獲取組件實例
    const Constructor = Vue.extend(Counter);
    //掛載組件
    const vm = new Constructor().$mount();
    //獲取button
    const button = vm.$el.querySelector("button");
    //新建點擊事件
    const clickEvent = new window.Event("click");
    //觸發點擊事件
    button.dispatchEvent(clickEvent);
    //監聽點擊事件
    vm._watcher.run();
    // 斷言:count的值應該是數字1
    expect(Number(vm.$el.querySelector(".num").textContent)).to.equal(1);
  })

})

上面這段代碼就是一個測試腳本.測試腳本應該包含一個或多個describe, 每個describe塊應該包括一個或多個it塊

describe塊稱為"測試套件"(test suite), 表示一組相關的測試. 它是一個函數, 第一個參數是測試套件的名稱(通常寫測試組件的名稱, 這里即為Counter.js), 第二個參數是一個實際執行的函數.

it塊稱為"測試用例"(test case), 表示一個多帶帶的測試, 是測試的最小單位. 它也是一個函數, 第一個參數是測試用例的名稱(通常描述你的斷言結果, 這里即為"點擊按鈕后, count的值應該為1"), 第二個參數是一個實際執行的函數.

我們在Counter.vue組件中添加一個按鈕, 并添加一個異步自增的方法為incrementByAsync, 該函數設置一個延時器, 1000ms后count自增1.