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

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

但是，你不是一個普通的開發者。你就可以開始就使用TDD與Vue，所以你可以確信你的代碼是完全如預期的�，F在我們一起在一個新的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測試文檔。