摘要：在前端進(jìn)階之路前端架構(gòu)設(shè)計(jì)測(cè)試核心這邊文章中通過(guò)分析了傳統(tǒng)手工測(cè)試的局限性去引出了測(cè)試驅(qū)動(dòng)開(kāi)發(fā)的理念并介紹了一些測(cè)試工具這篇文章我將通過(guò)一個(gè)的項(xiàng)目去講解如何使用且結(jié)合官方推薦的去進(jìn)行單元測(cè)試的實(shí)戰(zhàn)一安裝我為本教程寫(xiě)一個(gè)示例庫(kù)您可以直接

在《前端進(jìn)階之路: 前端架構(gòu)設(shè)計(jì)(3) - 測(cè)試核心》這邊文章中, 通過(guò)分析了"傳統(tǒng)手工測(cè)試的局限性" 去引出了測(cè)試驅(qū)動(dòng)開(kāi)發(fā)的理念, 并介紹了一些測(cè)試工具. 這篇文章我將通過(guò)一個(gè)Vue的項(xiàng)目, 去講解如何使用mocha & karma, 且結(jié)合vue官方推薦的vue-test-utils去進(jìn)行單元測(cè)試的實(shí)戰(zhàn).

我為本教程寫(xiě)一個(gè)示例庫(kù), 您可以直接跳過(guò)所有安裝過(guò)程, 安裝依賴(lài)后運(yùn)行該示例項(xiàng)目:

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

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

注意, 當(dāng)詢(xún)問(wèn)到這一步Pick a test runner(Use arrow keys)時(shí), 請(qǐng)選擇使用Karma and Mocha

接下來(lái)的操作進(jìn)入項(xiàng)目npm install安裝相關(guān)依賴(lài)后(該步驟可能更會(huì)出現(xiàn)PhantomJS這個(gè)瀏覽器安裝失敗的報(bào)錯(cuò), 不用理會(huì), 因?yàn)? 之后我們不使用這個(gè)瀏覽器), npm run build即可.

接下來(lái)安裝karma-chrome-launcher, 在命令行中輸入

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

然后在項(xiàng)目中找到test/unit/karma.conf.js文件, 將PhantomJS瀏覽器修改為Chrome不要問(wèn)我為什么不使用PhantomJS, 因?yàn)榻?jīng)常莫名的錯(cuò)誤, 改成Chrome就不會(huì)!!!)

//karma.conf.js

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

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

安裝Vue.js 官方的單元測(cè)試實(shí)用工具庫(kù), 在命令行輸入:

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

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

在命令行輸入npm run unit, 當(dāng)你看到下圖所示的一篇綠的時(shí)候, 說(shuō)明你的單元測(cè)試通過(guò)了!

下面是一個(gè)Counter.vue文件, 我將以該文件為基礎(chǔ)講解項(xiàng)目中測(cè)試工具的使用方法.

//Counter.vue

Mocha的作用是運(yùn)行測(cè)試腳本, 要對(duì)上面Counter.vue進(jìn)行測(cè)試, 我們就要寫(xiě)測(cè)試腳本, 通常測(cè)試腳本應(yīng)該與Vue組件名相同, 后綴為spec.js. 比如, Counter.vue組件的測(cè)試腳本名字就應(yīng)該為Counter.spec.js

//Counter.spec.js

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

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

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

})

上面這段代碼就是一個(gè)測(cè)試腳本.測(cè)試腳本應(yīng)該包含一個(gè)或多個(gè)describe, 每個(gè)describe塊應(yīng)該包括一個(gè)或多個(gè)it塊

describe塊稱(chēng)為"測(cè)試套件"(test suite), 表示一組相關(guān)的測(cè)試. 它是一個(gè)函數(shù), 第一個(gè)參數(shù)是測(cè)試套件的名稱(chēng)(通常寫(xiě)測(cè)試組件的名稱(chēng), 這里即為Counter.js), 第二個(gè)參數(shù)是一個(gè)實(shí)際執(zhí)行的函數(shù).

it塊稱(chēng)為"測(cè)試用例"(test case), 表示一個(gè)多帶帶的測(cè)試, 是測(cè)試的最小單位. 它也是一個(gè)函數(shù), 第一個(gè)參數(shù)是測(cè)試用例的名稱(chēng)(通常描述你的斷言結(jié)果, 這里即為"點(diǎn)擊按鈕后, count的值應(yīng)該為1"), 第二個(gè)參數(shù)是一個(gè)實(shí)際執(zhí)行的函數(shù).

我們?cè)?b>Counter.vue組件中添加一個(gè)按鈕, 并添加一個(gè)異步自增的方法為incrementByAsync, 該函數(shù)設(shè)置一個(gè)延時(shí)器, 1000ms后count自增1.