通常，使用測試驅動開發（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 。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）小智翻譯，原文有修改。
分享Vue.js的入門級全家桶系列教程：
1.vue.js 入門與提高:
http://xc.hubwiz.com/course/vue.js2.vuex 2 入門與提高:
http://xc.hubwiz.com/course/vuex3.vue-router 入門與提高:
http://xc.hubwiz.com/course/vuerouter4.vue.js 工程化實踐:
http://xc.hubwiz.com/course/vuegch