目的：
在已有vue專案上追加單元測試功能
為了利用vue-cli自帶生成的一系列配置，新起乙個vue-cli專案，在vue init時候選擇單元測試項，最終追查到需要新增的一些npm包，均安裝到devdependencies：
"@vue/test-utils": "^1.0.0-beta.29",
"babel-plugin-istanbul": "^5.2.0",
"chai": "^4.1.2",
"cross-env": "^6.0.0",
"expect": "^24.9.0",
"jsdom": "^15.1.1",
"jsdom-global": "^3.0.2",
"karma": "^1.4.1",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^4.0.2",
"mocha": "^6.2.0",
"mocha-webpack": "^1.1.0",
"sinon": "^4.0.0",
"sinon-chai": "^2.8.0",
"supertest": "^4.0.2",
"webpack-merge": "^4.2.2",
"webpack-node-externals": "^1.7.2"
"scripts"新增指令碼 // test/unit/karma.conf.js是放配置檔案的位址
"unit": "cross-env babel_env=test karma start test/unit/karma.conf.js --single-run",
"test": "npm run unit"
根目錄增加乙個資料夾
（可以從vue-cli專案中拷過來，根據實際專案 修改下部分配置檔案）devicelist.spec.js是我自己的乙個單元測試用例，之後按需新增即可
倒數第二個index.js開啟如下，按需修改
因為我本地/public/src/entry資料夾下有main.js
是webpack打包入口檔案指定的那個，裡面有new vue({})
倒數第乙個配置檔案開啟如下，按需修改
標註1對應的檔案是webpack.config.js的乙個拷貝
const merge = require('webpack-merge')
const devenv = require('./webpack.config')
module.exports = merge(devenv)
import from '@vue/test-utils'
import vuerouter from "vue-router"
import router from "@/router/main.js"
import store from '@/store/main/index.js'
// const router = new vuerouter(,
//
// ]
// })
const localvue = createlocalvue()
localvue.use(vuerouter)
describe('layout.vue', () => );
router.push("/device/list");
* 會查不到而用例不通過，例如/device中指定component是layout，其children中又包含
* 而只能匹配到layout
*/})})
router檔案是動態生成的，這裡也已經解決了，注意點:網上很多都是new了乙個router把配置放進去，其實會跑不通，因為匯出的已經是router的例項了，不需要重新new，除非你匯出的是routers的陣列 修飾掉的第14行到23行，是重新當前檔案模擬的乙個router例項，修飾掉第9行，改用當前方式，也是可以的
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...