vue-cli3 karma單元測試的實現

來源：懂視網責編：小采時間：2020-11-27 22:01:52

vue-cli3 karma單元測試的實現

vue-cli3 karma單元測試的實現:Karma Karma是一個測試工具，能讓你的代碼在瀏覽器環境下測試。代碼可能是設計在瀏覽器端執行的，在node環境下測試可能有些bug暴露不出來（比如要做樣式的測試），如果你的代碼只會運行在node端，那么你不需要用karma。 vue-cli3 結合karma 經過查

推薦度：

點擊下載本文 文檔為doc格式

導讀vue-cli3 karma單元測試的實現:Karma Karma是一個測試工具，能讓你的代碼在瀏覽器環境下測試。代碼可能是設計在瀏覽器端執行的，在node環境下測試可能有些bug暴露不出來（比如要做樣式的測試），如果你的代碼只會運行在node端，那么你不需要用karma。 vue-cli3 結合karma 經過查

Karma

Karma是一個測試工具，能讓你的代碼在瀏覽器環境下測試。代碼可能是設計在瀏覽器端執行的，在node環境下測試可能有些bug暴露不出來（比如要做樣式的測試），如果你的代碼只會運行在node端，那么你不需要用karma。

vue-cli3 結合karma

經過查找搜索到vue-cli-plugin-unit-karma插件, 集成vue-cli3與karma，但是結果不那么完美，執行的時候還是報錯。

不過功夫不負有心人，終于找到解決方法，步驟如下

安裝依賴

npm install --save-dev @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha

在package.json層創建karma.conf.js (注意，是conf，不是config!!!)

內容如下

var webpackConfig = require('@vue/cli-service/webpack.config.js')
module.exports = function (config) {
 config.set({
 frameworks: ['mocha'],
 files: [
 'tests/**/*.spec.js' //tests目錄下，所有.spce.js結尾的測試文件
 ],
 preprocessors: {
 '**/*.spec.js': ['webpack', 'sourcemap']
 },
 webpack: webpackConfig,
 reporters: ['spec'],
 browsers: ['ChromeHeadless']
 })
}

package.json內增加script命令