vue-cli3 karma單元測試的實現(xiàn)
更新時間：2019年01月18日 10:54:01 作者：saintkl
這篇文章主要介紹了vue-cli3 karma單元測試的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Karma
Karma是一個測試工具，能讓你的代碼在瀏覽器環(huán)境下測試。代碼可能是設(shè)計在瀏覽器端執(zhí)行的，在node環(huán)境下測試可能有些bug暴露不出來（比如要做樣式的測試），如果你的代碼只會運行在node端，那么你不需要用karma。
vue-cli3 結(jié)合karma
經(jīng)過查找搜索到vue-cli-plugin-unit-karma插件, 集成vue-cli3與karma，但是結(jié)果不那么完美，執(zhí)行的時候還是報錯。
不過功夫不負有心人，終于找到解決方法，步驟如下
安裝依賴
npm install --save-dev @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha
在package.json層創(chuàng)建karma.conf.js (注意，是conf，不是config!!!)
內(nèi)容如下
var webpackConfig = require('@vue/cli-service/webpack.config.js')
module.exports = function (config) {
config.set({
frameworks: ['mocha'],
files: [
'tests/**/*.spec.js' //tests目錄下，所有.spce.js結(jié)尾的測試文件
],
preprocessors: {
'**/*.spec.js': ['webpack', 'sourcemap']
},
webpack: webpackConfig,
reporters: ['spec'],
browsers: ['ChromeHeadless']
})
}
package.json內(nèi)增加script命令
"test": "karma start"
最后執(zhí)行 npm run test 即可
參考
Testing Single-File Components with Karma
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺談Vue-cli單文件組件引入less,sass,css樣式的不同方法
下面小編就為大家分享一篇淺談Vue-cli單文件組件引入less,sass,css樣式的不同方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue3+TS項目中eslint、prettier安裝配置詳細指南
為了更好的統(tǒng)一項目的代碼風格,因此在編寫時就可以使用eslint+prettier,它們不僅能方便代碼編寫,還能避免不必要的錯誤,讓代碼變得更加嚴謹,這篇文章主要給大家介紹了關(guān)于Vue3+TS項目中eslint、prettier安裝配置的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue yaml代碼編輯器組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vue路由事件beforeRouteLeave及組件內(nèi)定時器的清除方法
今天小編就為大家分享一篇vue路由事件beforeRouteLeave及組件內(nèi)定時器的清除方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
最近用vue寫上傳的時候,遇到一個需求就是頁面上展示上傳的進度條,之后寫過一次,但是用的是假交互,直接從0-100,今天分享一下用axios自帶的onUploadProgress來完成這個小需求,感興趣的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue中使用h5 Plus的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
今天小編就為大家分享一篇vue 父組件通過$refs獲取子組件的值和方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本文主要介紹了Vuex 命名空間 namespaced的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)批量下載文件的方法（不走后端接口的方法）,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
這篇文章主要為大家介紹了vue使用Swiper踩坑及解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05