vue-cli 3 karmaユニットテスト

Karma

Karmaは、ブラウザ環境でコードをテストできるテストツールです.コードはブラウザ側で実行されるように設計されている可能性があります.node環境でテストすると、いくつかのバグが露出しない可能性があります(スタイルのテストをするなど)、コードがnode側でしか実行されない場合は、karmaを使用する必要はありません.

vue-cli 3結合karma

検索によりvue-cli-plugin-unit-karmaプラグインが検索され、vue-cli 3と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コマンドを追加

"test": "karma start"

最後にnpm run testを実行すると、Vue cli 3とkarma Testing Single-File Components with Karmaを参照できます.