此文已由作者張漢銳授權網易雲社群發布。
vue 的單元測試環境
按照目前全家桶的情況，是需要 webpack 的支援的。可以直接使用 vue-cli ，選擇 webpack 模版，裡面會有完整的單元測試 & 端對端測試的配置。如果想要自己配置，則在配置完基本的 karma 測試環境之後，將 webpack 加入到 preprocessor 上。
測試覆蓋率
同理 vue-cli 的 webpack 模版已經做的很完善了。如果不想用全家桶，在不需要 babel 編譯的情況下，單元測試覆蓋率的計算，可以通過 istanbul 實現，具體可以看 istanbul 文件。但如果需要經過 babel 編輯的話，就需要借助 babel-plugin-istanbul。
vue 元件（檔案）的單元測試
主要考慮幾個點：
具體參考官網 unit testing ，裡面提供了很清晰的例子，這裡就不做搬運工了。
vuex 的單元測試
vuex 的測試相對簡單，vuex 主要的測試物件就是 mutation, action, getter 這些。其中 ：
關於 vuex 單元測試的詳細列子說明，可以參考 官網的文件 unit testing
vue + vuex 的單元測試
也就是：vue 元件中依賴了 vuex 的 mutation, actions, getters 的時候 ，vue 如何做測試比較好。
vue-loader 文件 給出了方法。
首先，社群有個 inject-loader 能夠 mock 依賴，看看下面例子
// log.jsvar myutils = require('./utils');
myutils.log('hi');// test.jsvar inject = require('!!vue-loader?inject!./log.js')var mylog = inject(
}})
inject-loader 能夠在載入 log.js 時候，允許我們 mock log.js 的依賴。所以當元件依賴 vuex 的時候，就可以通過 inject-loader 來 mock 依賴，從而方便將 vuex 和 vue 元件的測試分開。
具體的原理和使用方法，可以看上面給出的文件。
（注意，文件說的 [email protected] is currently unstable ，文件演示的例子也是提示安裝 2.0 ，實際上現在 3.0 已經穩定了，參考這裡。使用 2.0 反而問題多多）
其他tips：記得安裝 sinon，chai 的 types 檔案，寫起測試來會很爽
免費體驗雲安全(易盾)內容安全、驗證碼等服務
更多網易技術、產品、運營經驗分享請點選。
【推薦】 androidtv開發（3）
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...