vue-cli3 karma單元測(cè)試的實(shí)現(xiàn)
Karma
Karma是一個(gè)測(cè)試工具，能讓你的代碼在瀏覽器環(huán)境下測(cè)試。代碼可能是設(shè)計(jì)在瀏覽器端執(zhí)行的，在node環(huán)境下測(cè)試可能有些bug暴露不出來(lái)（比如要做樣式的測(cè)試），如果你的代碼只會(huì)運(yùn)行在node端，那么你不需要用karma。
vue-cli3 結(jié)合karma
經(jīng)過(guò)查找搜索到vue-cli-plugin-unit-karma插件, 集成vue-cli3與karma，但是結(jié)果不那么完美，執(zhí)行的時(shí)候還是報(bào)錯(cuò)。
不過(guò)功夫不負(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é)尾的測(cè)試文件
],
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
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)前端分頁(yè)完整代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
vue清空數(shù)組的幾個(gè)方式(小結(jié))
本文主要介紹了vue清空數(shù)組的幾個(gè)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
Vue下拉框加分頁(yè)搜索功能的實(shí)現(xiàn)方法
開發(fā)任務(wù)中有這樣一個(gè)需求，下拉框中需要展示超過(guò)5000條數(shù)據(jù)，甚至更多，這數(shù)據(jù)量直接整個(gè)頁(yè)面卡死了，就想到在下拉框中加分頁(yè)，下面小編通過(guò)實(shí)例代碼介紹下Vue下拉框加分頁(yè)搜索功能的實(shí)現(xiàn)，感興趣的朋友一起看看吧2022-11-11
Vue3中的script?setup語(yǔ)法糖的使用及說(shuō)明
在這篇博客中,我們將探討?script?setup?的含義、好處以及示例代碼,幫助你更好地理解并在項(xiàng)目中合理運(yùn)用這一特性,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
利用webstrom調(diào)試Vue.js單頁(yè)面程序的方法教程
這篇文章主要給大家介紹了利用webstrom調(diào)試Vue.js單頁(yè)面程序的方法教程，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
這篇文章主要介紹了vue+express+jwt持久化登錄的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了vue3封裝計(jì)時(shí)器組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue中then后的返回值解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
cordova+vue+webapp使用html5獲取地理位置的方法
這篇文章主要介紹了2019-07-07
Vue+Bootstrap收藏（點(diǎn)贊）功能邏輯與具體實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue+Bootstrap收藏（點(diǎn)贊）功能邏輯與具體實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10