單元測試
在新建專案的時候就將「單元測試」這個選項選上，cli腳手架會自動幫助生成單元測試檔案，依賴庫都會幫助安裝好。
a）jest和mocha。js是由facebook開發的，不需要自己去寫js dom以及斷言，已經內建了斷言庫。
b）@vue/test-utils
c) sinon：建立測試的替身
先自己想想測試該怎麼做。先將這個測試單元取個名字，說明是要測試哪個單元的程式。然後分析對這個程式要進行哪些角度的測試。如果是乙個框，則可以從檢視和計算結果兩個方面來測試是否正確，檢視可以測試與快照是否相同，不同的話就不通過。計算結果的話就要先寫出輸入內容和輸出結果，如果網頁上的輸出結果跟測試單元裡面的輸出結果是一樣的就是對的。
以下這個vue例項，功能有：每點一次按鈕數字就要加1，同時還要將count當前的值（this.count）發射到「change」這個頻道中，由它的父元件通過偵聽來接收。
單元測試檔案不是vue例項，是js檔案
import from "@vue/test-utils"; //mount我的理解是錨定，就是複製（映象）需要測試的vue例項，類似dpi將流量映象一遍進行檢查。
import counter from "@/components/counter.vue"; //將單元測試的物件import到單元測試的vue中，以便後續錨定。要測的就是counter.vue
import sinon from "sinon"; //乙個輔助測試的外掛程式
describe("counter.vue", () =>
});it("renders counter html", () => );
});以下是從「2小時學會vue單元測試」中學習到的例子。安裝的不是jest，是mocha，斷言庫用的是chai
testdemo.vue 這是從vue的官網的vue單元測試的例子
}
import vue from "vue"
import from "chai"
import hello from "@/components/testdemo.vue"
describe("hello", () => )
})
問題2：it中定義的***.username=「123」，無效。也就是說無法更改頁面中username的初始設定。
需要加入乙個factory function，用於模擬資料的輸入。
import from "chai"import from '@vue/test-utils'
import hello from "@/components/testdemo.vue"
const factory = (values = {}) => }})
}describe("hello", () => ),
describe("2-input", () => )
expect(vm.find('.error').text()).equal("correct enter")
}),it("2.2-input shorter than 7",()=>)
expect(vm.find('.error').text()).equal('please enter a longer username')
})})
})
VUE 單元測試
官網上推薦的是karma和jasmine,這裡我寫的是我們自己的手動單元測試.我們都知道,乙個專案在完成之後會進入後期的更新迭代和維護.而單元測試雖然在前期寫起來會相對麻煩,但是在後期的維護過程中會簡單很多,可以明顯的看出是後台埠的問題還是前端自己的問題.我們現在工程目錄裡建立乙個測試的資料夾 這裡...
vue 單元測試
vue cli 擁有開箱即用的通過 jest 或 mocha 進行單元測試的內建選項。我們還有官方的 vue test utils 提供更多詳細的指引和自定義設定。你不必為了可測性在元件中做任何特殊的操作，匯出原始設定就可以了 然後隨著 vue test utils 匯入元件，你可以使用許多常見的斷...
vue 單元測試
在 vscode 編輯器安裝乙個名為jest的外掛程式 建立專案 用此新建的專案可以不用安裝依賴 vue init webpack unit demo編寫 jest 配置檔案 需要在 jest.conf.js中加入此 否則會報錯 編寫乙個元件 unit testing demo src compon...