vue-cli3 karma單元測試的實(shí)現(xiàn)
更新時(shí)間：2019年01月18日 10:54:01 作者：saintkl
這篇文章主要介紹了vue-cli3 karma單元測試的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
Karma
Karma是一個(gè)測試工具，能讓你的代碼在瀏覽器環(huán)境下測試。代碼可能是設(shè)計(jì)在瀏覽器端執(zhí)行的，在node環(huán)境下測試可能有些bug暴露不出來（比如要做樣式的測試），如果你的代碼只會(huì)運(yùn)行在node端，那么你不需要用karma。
vue-cli3 結(jié)合karma
經(jīng)過查找搜索到vue-cli-plugin-unit-karma插件, 集成vue-cli3與karma，但是結(jié)果不那么完美，執(zhí)行的時(shí)候還是報(bào)錯(cuò)。
不過功夫不負(fù)有心人，終于找到解決方法，步驟如下
安裝依賴
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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺談Vue-cli單文件組件引入less,sass,css樣式的不同方法
下面小編就為大家分享一篇淺談Vue-cli單文件組件引入less,sass,css樣式的不同方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue3+TS項(xiàng)目中eslint、prettier安裝配置詳細(xì)指南
為了更好的統(tǒng)一項(xiàng)目的代碼風(fēng)格,因此在編寫時(shí)就可以使用eslint+prettier,它們不僅能方便代碼編寫,還能避免不必要的錯(cuò)誤,讓代碼變得更加嚴(yán)謹(jǐn),這篇文章主要給大家介紹了關(guān)于Vue3+TS項(xiàng)目中eslint、prettier安裝配置的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue yaml代碼編輯器組件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue路由事件beforeRouteLeave及組件內(nèi)定時(shí)器的清除方法
今天小編就為大家分享一篇vue路由事件beforeRouteLeave及組件內(nèi)定時(shí)器的清除方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue+axios實(shí)現(xiàn)文件上傳的實(shí)時(shí)進(jìn)度條
最近用vue寫上傳的時(shí)候,遇到一個(gè)需求就是頁面上展示上傳的進(jìn)度條,之后寫過一次,但是用的是假交互,直接從0-100,今天分享一下用axios自帶的onUploadProgress來完成這個(gè)小需求,感興趣的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue中使用h5 Plus的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
今天小編就為大家分享一篇vue 父組件通過$refs獲取子組件的值和方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本文主要介紹了Vuex 命名空間 namespaced的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)批量下載文件的方法（不走后端接口的方法）,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
這篇文章主要為大家介紹了vue使用Swiper踩坑及解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05