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實現(xiàn)前端分頁完整代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
本文主要介紹了vue清空數(shù)組的幾個方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
開發(fā)任務(wù)中有這樣一個需求，下拉框中需要展示超過5000條數(shù)據(jù)，甚至更多，這數(shù)據(jù)量直接整個頁面卡死了，就想到在下拉框中加分頁，下面小編通過實例代碼介紹下Vue下拉框加分頁搜索功能的實現(xiàn)，感興趣的朋友一起看看吧2022-11-11
在這篇博客中,我們將探討?script?setup?的含義、好處以及示例代碼,幫助你更好地理解并在項目中合理運用這一特性,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
利用webstrom調(diào)試Vue.js單頁面程序的方法教程
這篇文章主要給大家介紹了利用webstrom調(diào)試Vue.js單頁面程序的方法教程，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-06-06
這篇文章主要介紹了vue+express+jwt持久化登錄的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
這篇文章主要為大家詳細介紹了vue3封裝計時器組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue中then后的返回值解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
cordova+vue+webapp使用html5獲取地理位置的方法
這篇文章主要介紹了2019-07-07
Vue+Bootstrap收藏（點贊）功能邏輯與具體實現(xiàn)
這篇文章主要為大家詳細介紹了Vue+Bootstrap收藏（點贊）功能邏輯與具體實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10