vue-cli3 karma單元測(cè)試的實(shí)現(xiàn)

Karma

Karma是一個(gè)測(cè)試工具，能讓你的代碼在瀏覽器環(huán)境下測(cè)試。代碼可能是設(shè)計(jì)在瀏覽器端執(zhí)行的，在node環(huán)境下測(cè)試可能有些bug暴露不出來（比如要做樣式的測(cè)試），如果你的代碼只會(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é)尾的測(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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com