如何Vue-cli開始使用在Vue.js項目中啓動TDD（測試驅動開發）

一般，使用測試驅動開發（TDD）最困難的部分是開始。你必須下載帶有奇怪依賴項的軟件包，讓測試套件與你的構建系統協同工做，而後你必須弄清楚如何編寫一個測試！難怪這麼多的開發者在你提起它的時候就開始跑開了。

可是，你不是一個普通的開發者。你就能夠開始就使用TDD與Vue，因此你能夠確信你的代碼是徹底如預期的。如今咱們一塊兒在一個新的Vue項目開始測試工做，經過默認的測試，而後添加一些咱們本身想作的。

設置

啓動TDD的最簡單方法是使用Vue-cli工具。若是你尚未使用過它，Vue-cli工具提供了你從命令行開始進行一個新的Vue項目的方法。

當你使用Vue-cli腳手架啓動項目，全部你須要作的就是按照提示而後測試會自動爲你設置。這有多容易？讓咱們走過這個過程，這樣咱們就能夠確切地看到如何去作。

第一步是安裝Vue-cli的工具，若是你尚未。使用npm，你能夠打開你的終端運行npm install -g vue-cli安裝它。

在建立項目以前，咱們須要選擇一個模板。Vue-cli給咱們幾個不一樣的模板選項如WebPack，browserify，PWA，simple。他們每一個都有本身獨特的設置，我會讓你選擇最適合你的。請注意，「sample」版本不包括測試。在本教程中，我將使用WebPack模板。

如今，瀏覽到你想建立新的Vue項目所在的目錄。在這裏你能夠運行vue init <template-name> <project-name>。Vue-cli工具將提示您提供一系列的關於項目的問題，像這樣：

你看，我已經接受了大部分默認腳手架設置，但我關掉Vue-router由於咱們暫時不須要它。你選擇什麼取決於你的項目，但請確保啓用單元測試！

當你啓用單元測試時，你將被要求選擇一個測試運行器。 我選擇Karma和Mocha，由於那是我所熟悉的。可是，我據說過不少關於Jest的東西，我必定很快就想試試。

在那以後，Vue-cli會問你，若是你想與Nightwatch創建端到端的測試。這有點超出了「入門」教程的範圍，因此咱們如今不說了。最後，選擇是否運行run npm 或者yarn 安裝後，它會爲您生成項目。

哦，咱們有了一個新的測試，已經爲咱們構建了Vue項目！若是你的cd到您的項目和運行新的運行測試，咱們能夠看到，Vue-cli已經包括咱們的項目和他們經過的一些測試。

看看狀況

如今咱們都準備好了，讓咱們四處看看，看看咱們的項目是什麼樣子。咱們的文件結構應該以下所示：

咱們能夠看到，Vue-cli作了大量的工做，咱們！雖然這裏有不少內容，但對於本教程，咱們只關心測試和SRC目錄。

在src中，咱們能夠看到，咱們有兩個Vue組件和main.js文件。而後，在測試中，咱們能夠看到一些測試設置文件和咱們的規格目錄。這是咱們寫測試的地方。讓咱們看看裏面，看看helloworld.spec.js中有什麼。

讓咱們一塊一塊地把這個文件打開。在最開始，咱們引入Vue和HelloWorld的組件能夠用在測試。接下來，咱們使用**describe()功能，封裝測試斷言。咱們的主張是在it()**函數中定義。這是咱們能夠看到組件測試的地方。

若是你是新的測試，這多是一個困難的概念包裝你的腦海中。我喜歡思考的是，咱們的應用程序的測試就像一個大標準化測試，咱們都在最初階段。每一個**describe()函數是一個不一樣的主題，而後每一個it()**功能測試包含一個問題。隨着你對測試愈來愈熟悉，我相信你會想出本身編寫測試的內容。

回到HelloWorld.spec.js，咱們知道咱們的「主體」是helloworld.vue和咱們的測試問題，應該給予它正確的內容。那麼，咱們怎麼作呢？

首先，咱們使用Vue.extend（HelloWorld）經過Vue函數在HelloWorld類的基礎上構建一個之類。接下來，咱們實例化HelloWorld這樣咱們能夠與它進行交互。在測試中，這一般被稱爲「設置」或「構建」，本質上，咱們正在初始化環境以匹配測試過程當中要與之交互的適當狀態。

最後，咱們準備看看咱們的斷言。在這裏，咱們期待着裏面的文字，在你的vue.js程序中設置**.hello**

中的h1爲「Welcome to Your Vue.js App.」。「這是真的嗎？」好吧，若是你已經運行你的測試，你知道他們經過了。因此，讓咱們看看**helloworld.vue，**看看它的代碼設置。

在第3行，咱們看到裏面的H1。你好，是從咱們的Vue數據傳遞一個信息。而後，在28行咱們看到，信息是咱們預期的字符串：「Welcome to Your Vue.js App.」看起來咱們的測試像是正確的！

寫一個測試

既然咱們確信咱們的測試是正確的，那麼咱們來添加一個咱們本身的測試。編寫任何測試的第一步老是弄清楚咱們想要測試什麼。這也是最難作的事情，也是最容易解釋的部分。

那裏有許多不一樣的策略。我發現一個好的作法是花一點時間思考給定的組件應該作什麼，而後編寫測試來驗證它。我一般不擔憂「單元」測試每一個方法或屬性。相反，我專一於測試我指望從組件中得到的行爲。

讓咱們把這種方法用在咱們的HelloWorld組件。咱們指望什麼樣的行爲？咱們但願它能提供一組靜態信息，而咱們當前的測試涵蓋了。若是動態MSG不呈現，那麼咱們能夠至關確定咱們的內容渲染會有問題。可是，讓咱們編寫一個測試來確保全部連接都顯示在頁面上，即便出現了一個未知問題。

首先，讓咱們來考慮一下咱們的測試。咱們但願確保全部連接都顯示正確。所以，讓咱們編寫一個測試，以確保咱們呈現正確的連接數量。

回到HelloWorld.spec.js，咱們的第一**it()**右下方，咱們能夠添加一個像這樣：

it('should show all the links', () => {
})

如今，咱們須要像在第一次測試中那樣，創建咱們的內容。因此，咱們能夠添加相同的常量，咱們在第一個**it()**中。

it('should show all the links', () => {
 const Constructor = Vue.extend(HelloWorld)
 const vm = new Constructor().$mount()
})

咱們要確保全部的連接顯示相應的頁面。讓咱們試着找出咱們組件呈現的全部連接的計數，看看是否符合咱們的指望。在helloworld.vue咱們有9個環節，因此咱們但願咱們的組件來呈現9個環節。

it('should show all the links', () => {
 const Constructor = Vue.extend(HelloWorld)
 const vm = new Constructor().$mount()
 expect(vm.$el.querySelectorAll('a').length)
 .to.equal(9)
})

當咱們運行測試套件時，咱們能夠看到咱們運行結果正在變綠！要檢查是否正常，請嘗試註釋一個連接，以確保它像咱們預期的那樣失敗。

總結

咱們在此次演練中已經討論了不少。咱們開始把咱們的項目和Vue-cli運行。而後，咱們查看了默認測試，看看它們是如何工做的。最後，咱們編寫了本身的測試，以確保咱們的組件能按照咱們指望的方式工做。

雖然咱們涉及了不少，但這只是冰山一角。學習測試Vue我推薦你看看Vue課程 和TDD課程。其餘一些很棒的資源是mocha入門指南也有免費的內容和vue.js測試文檔。

固然，咱們都知道最好的學習方法就是繼續練習。因此，對於你的下一個項目或者全新的組件，試着設置測試並給它一個點贊。我敢打賭你會對你所能取得的成就印象深入。若是你被卡住了，能夠在評論中問我任何問題。直到下一次，快樂的編碼！

匯智網（www.hubwiz.com）小智翻譯，原文有修改。