摘要：在這個(gè)教程中，我們將創(chuàng)建一個(gè)簡(jiǎn)單的項(xiàng)目，并為其寫(xiě)一個(gè)簡(jiǎn)單的單元測(cè)試。希望你讀這些代碼的時(shí)候思路能夠清晰，不過(guò)它對(duì)于剛剛開(kāi)始接觸單元測(cè)試的人來(lái)說(shuō)可讀性并不是很高。總結(jié)在日常工作以及開(kāi)發(fā)中，尤其是項(xiàng)目，測(cè)試是非常重要的。

譯者：明非
鏈接：https://fanmingfei.com/posts/A_Vue_Unit_Text_Tutorial.html
原文：https://scotch.io/amp/tutorials/how-to-write-a-unit-test-for-vuejs?from=timeline&isappinstalled=0

眾所周知，Vue.js 是一個(gè)非常牛逼的 JavaScript 框架，對(duì)于創(chuàng)建復(fù)雜功能的前端項(xiàng)目是非常有用的。不管是什么項(xiàng)目，檢查應(yīng)用是否正常工作，運(yùn)行是否為預(yù)期，是尤為重要的。然而，為了保證業(yè)務(wù)正常運(yùn)行，我們的項(xiàng)目，每做一次更新，都要對(duì)所有功能做一次回歸測(cè)試，隨著項(xiàng)目的增大，重復(fù)的測(cè)試工作越來(lái)越多，越來(lái)越乏味，手工測(cè)試將變成一個(gè)惡心的事情。正因如此，自動(dòng)化測(cè)試誕生了，它可以隨時(shí)監(jiān)測(cè)我們的代碼是否正常工作，運(yùn)行結(jié)果是否符合預(yù)期。在這個(gè)教程中，我們將創(chuàng)建一個(gè)簡(jiǎn)單的VueJS項(xiàng)目，并為其寫(xiě)一個(gè)簡(jiǎn)單的單元測(cè)試。

我們創(chuàng)建一個(gè)基本的 to-do list 組件進(jìn)行測(cè)試。我們將要測(cè)試的是，列表展示是否正確，用戶是否可以正常添加到 to-do list。通過(guò)這個(gè)教程，你將學(xué)會(huì)如何去為你的組件寫(xiě)一個(gè)測(cè)試，測(cè)試包括HTML展示是否正確以及用戶的操作是否能正常進(jìn)行。

這個(gè)git庫(kù)是這篇文章的所有代碼。

創(chuàng)建 JavaScript 項(xiàng)目可能是一個(gè)復(fù)雜的過(guò)程。琳瑯滿目的依賴庫(kù)供我們選擇。不過(guò)還好，我們可以使用vue-cli來(lái)創(chuàng)建VueJS項(xiàng)目，它幫我們包辦一切。運(yùn)行 npm install 來(lái)安裝依賴：

npm install -g vue-cli
vue init webpack project-name

在這個(gè)過(guò)程中，你可能會(huì)遇到幾個(gè)提示。大多數(shù)提示比較簡(jiǎn)單易懂，你可以直接選擇默認(rèn)選項(xiàng)。需要注意的是，我們需要是否安裝 vue-router、Karma、Mocha的提示后輸入YES來(lái)引入這些工具。然后開(kāi)始安裝依賴：

cd project-name
npm install

接下來(lái)我們執(zhí)行下面的命令，這個(gè)命令將會(huì)在本地運(yùn)行你的應(yīng)用并在瀏覽器中打開(kāi)。

npm run dev

如果你的網(wǎng)絡(luò)好的話，一會(huì)就裝好了。

Webpack (2.3) 是一個(gè)打包器，它可以合并打包JavaScript，CSS，HTML文件，并且提供給應(yīng)用運(yùn)行。Bable (v6.22) 是一個(gè)編譯器，用來(lái)把ES6編譯成ES5。目前有很多 JavaScript 標(biāo)準(zhǔn)在許多瀏覽器中還沒(méi)有被支持，所以需要將ES6轉(zhuǎn)成ES。

Karma (v1.4) 是一個(gè)運(yùn)行時(shí)，它產(chǎn)生一個(gè) Web 服務(wù)環(huán)境來(lái)運(yùn)行項(xiàng)目代碼，并且執(zhí)行測(cè)試。Mocha (v3.2) 是一個(gè) JavaScript 測(cè)試框架。Chai (v3.5) 是一個(gè) Mocha 可以使用的斷言庫(kù)。

在你的項(xiàng)目中，你可以找到下面這些目錄：build、config、node_modules、src、static 和 test。對(duì)于本教程來(lái)說(shuō)最重要的是src，它包括我們應(yīng)用的代碼，用來(lái)測(cè)試。

從最基本的開(kāi)始去做一般都沒(méi)錯(cuò)。我們將從創(chuàng)建簡(jiǎn)單的列表組件開(kāi)始。在 src/components 里創(chuàng)建一個(gè)新文件叫做 List.vue 并且將下面代碼寫(xiě)進(jìn)去。

在這個(gè)組件中，列表項(xiàng)被儲(chǔ)存在數(shù)組（listItems）里面。數(shù)據(jù)被傳遞到模板，然后被遍歷（v-for），然后展現(xiàn)在頁(yè)面上。

當(dāng)然，我們需要看到剛剛創(chuàng)建的列表，我們可以創(chuàng)建一個(gè)新的路由來(lái)展示這個(gè)組件。在src/router/index.js中創(chuàng)建一個(gè)路由，添加完了代碼應(yīng)該是下面這樣的：

import Vue from "vue"
import Router from "vue-router"
import Hello from "@/components/Hello"
import List from "@/components/List"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      name: "Hello",
      component: Hello
    },
    {
      path: "/to-do",
      name: "ToDo",
      component: List
    },
  ]
})

現(xiàn)在，訪問(wèn)localhost:8080/#/to-do，可以看到我們做的應(yīng)用。

首先，我們要測(cè)試的是數(shù)據(jù)的正確性。在test/unit/specs目錄下創(chuàng)建一個(gè)List.spec.js，并且寫(xiě)入下面的代碼：

import List from "@/components/List";
import Vue from "vue";

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

  it("displays items from the list", () => {
      // our test goes here
  })
})

在這個(gè)文件中，我們_describing_了List.vue組件，并且我們創(chuàng)建了一個(gè)空的測(cè)試，他將要檢查這個(gè)組件的列表展示。這是一個(gè)基本的 Mocha 測(cè)試文件。

我們首先要安裝我們的Vue組件。復(fù)制下面代碼放在測(cè)試文件的"our test goes here"下面：

// build component
const Constructor = Vue.extend(List);
const ListComponent = new Constructor().$mount();

我們繼承了Vue組件并且安裝這個(gè)組件。安裝組件很重要，只有這樣我們才能將通過(guò)模板來(lái)渲染HTML。也就是說(shuō)，HTML已經(jīng)被創(chuàng)建，并且我們模板中的變量（比如 item）已經(jīng)被填充內(nèi)容，這樣我們就可以獲取HTML了（使用$el）。

我們的組件準(zhǔn)備好了，我們可以寫(xiě)第一個(gè)斷言。在這個(gè)例子中，我們使用Chai 斷言庫(kù)提供的 "expect" 模式，還有 "should" 和 "assert"模式。將下面的代碼放到，啟動(dòng)組件的后面。

// assert that component text contains items from the list
expect(ListComponent.$el.textContent).to.contain("play games");

之前提到過(guò)，我們可以使用ListComponent.$el來(lái)獲取組件的HTML，如果想去獲取HTML內(nèi)的內(nèi)容（比如 文本），我們可以使用ListComponent.$el.textContent。這個(gè)斷言用來(lái)檢查HTML列表中的文本是否和組件的data里的數(shù)據(jù)列表吻合。

為了檢查所有的事情都符合我們的預(yù)期，我們可以運(yùn)行測(cè)試！通過(guò) vue-cli 創(chuàng)建的項(xiàng)目，我們可以簡(jiǎn)單的使用npm run unit來(lái)運(yùn)行cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run。

npm run unit

如果測(cè)試都通過(guò)了，將會(huì)有一個(gè)綠色的列表來(lái)顯示測(cè)試報(bào)告，讓你了解測(cè)試都覆蓋了哪些代碼。

雖然前面的功能贊贊噠，但沒(méi)有多少應(yīng)用只是用來(lái)展示數(shù)據(jù)。下一步我們要做到是添加新的項(xiàng)目到to-do list中?？催@里，我們創(chuàng)建了一個(gè)input框來(lái)輸入內(nèi)容，然后創(chuàng)建一個(gè)button用來(lái)提交內(nèi)容。下面是更新后的 List.vue：

使用v-model，輸入框里面的內(nèi)容將和newItem進(jìn)行雙向綁定。當(dāng)按鈕被點(diǎn)擊后，執(zhí)行addItemToList，將newItem添加到to-do list數(shù)組里面，并且清空newItem里面的內(nèi)容，新的項(xiàng)目將會(huì)被添加到列表中。

可以為新功能寫(xiě)測(cè)試文件了，創(chuàng)建List.spec.js，并且添加以下測(cè)試代碼。

it("adds a new item to list on click", () => {
    // our test goes here
})

第一步，我們需要?jiǎng)?chuàng)建我們的組件，并且模擬一個(gè)用戶在輸入框的輸入行為。因?yàn)?VueJs 將輸入框和 newItem 變量進(jìn)行了綁定，我們可以給newItem設(shè)置內(nèi)容。

// build component
const Constructor = Vue.extend(List);
const ListComponent = new Constructor().$mount();

// set value of new item
ListComponent.newItem = "brush my teeth";

下一步，我們需要點(diǎn)擊按鈕。我們需要在HTML中找到按鈕，在$el中即可找到。這是，我們可以使用querySelector，像選擇真是元素一樣選擇這個(gè)按鈕。也可以使用class(.buttonClass)、ID（#buttonID）或者標(biāo)簽名(button)來(lái)選擇。

// find button
const button = ListComponent.$el.querySelector("button");

為了模擬點(diǎn)擊，我們需要給按鈕一個(gè)新的事件對(duì)象。在測(cè)試環(huán)境中，List組件不會(huì)監(jiān)聽(tīng)任何事件，因此我們需要手動(dòng)運(yùn)行watcher。

// simulate click event
const clickEvent = new window.Event("click");
button.dispatchEvent(clickEvent);
ListComponent._watcher.run();

最后，我們需要檢查我們添加的新項(xiàng)目是否顯示在HTML中，這個(gè)在前面已經(jīng)介紹過(guò)。我們也需要檢查newItem是否被存儲(chǔ)在了數(shù)組里面。

//assert list contains new item
expect(ListComponent.$el.textContent).to.contain("brush my teeth");
expect(ListComponent.listItems).to.contain("brush my teeth");

下面是整個(gè)測(cè)試文件的內(nèi)容：

import List from "@/components/List";
import Vue from "vue";

describe("List.vue", () => {
  it("displays items from the list", () => {
    const Constructor = Vue.extend(List);
    const ListComponent = new Constructor().$mount();
    expect(ListComponent.$el.textContent).to.contain("play games");
  })

  it("adds a new item to list on click", () => {
    // build component
    const Constructor = Vue.extend(List);
    const ListComponent = new Constructor().$mount();

    // set input value
    ListComponent.newItem = "brush my teeth";

    // simulate click event
    const button = ListComponent.$el.querySelector("button");
    const clickEvent = new window.Event("click");
    button.dispatchEvent(clickEvent);
    ListComponent._watcher.run();

    // assert list contains new item
    expect(ListComponent.$el.textContent).to.contain("brush my teeth");
    expect(ListComponent.listItems).to.contain("brush my teeth");
  })
})

現(xiàn)在跑一次這個(gè)測(cè)試，應(yīng)該全是綠色的。

希望你讀這些代碼的時(shí)候思路能夠清晰，不過(guò)它對(duì)于剛剛開(kāi)始接觸VueJs單元測(cè)試的人來(lái)說(shuō)可讀性并不是很高。有一個(gè)VueJS實(shí)用程序庫(kù)，它將一些復(fù)雜的代碼進(jìn)行了封裝。如果想使用它，可以在項(xiàng)目的根目錄下輸入以下命令安裝。

npm install avoriaz

下面這個(gè)測(cè)試實(shí)際上和上面測(cè)試相同，只不過(guò)寫(xiě)法上有些不同。我們使用了mount()法來(lái)安裝Vue組件，使用find()獲取按鈕，使用dispatch()來(lái)觸發(fā)點(diǎn)擊。

import { mount } from "avoriaz";
import List from "@/components/List";
import Vue from "vue";

describe("List.vue", () => {
  // previous tests ..

  it("adds new item to list on click with avoriaz", () => {
       // build component
    const ListComponent = mount(List);

    // set input value
    ListComponent.setData({
      newItem: "brush my teeth",
    });

    // simulate click event
    const button = ListComponent.find("button")[0];
    button.dispatch("click");

    // assert list contains new item
    expect(ListComponent.text()).to.contain("brush my teeth");
    expect(ListComponent.data().listItems).to.contain("brush my teeth");
  })
})

在日常工作以及JavaScript開(kāi)發(fā)中，尤其是VueJS項(xiàng)目，測(cè)試是非常重要的。因?yàn)閯傞_(kāi)始接觸測(cè)試的時(shí)候，我遇到了一些問(wèn)題，所以總結(jié)出一篇文章供大家參考。希望這篇文章能夠幫到所有像我一樣的人。

這個(gè)git庫(kù)是這次教程所有的代碼。