How to add Karma+Mocha tests after initializing project using vue-cli

Question

Hi I started a project using Vue-cli webpack the mistake I did was I did not enable tests

How do I add karma+mocha to my webpack vuejs2 development is it possible to reinitialize and include tests ?

Answer 1

in your package.json add the following :

"karma": "^1.7.0",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.4",
"mocha": "^3.0.2",
"chai": "~4.1.1",

in karma.conf.js:

const wpConf = require("./webpack.config")
wpConf.devtool = "inline-source-map"

module.exports = config => {
  config.set({
    browsers:      ["PhantomJS"],
    files:         ["./socialhome/**/app/tests/**/*\.tests\.js"],
    frameworks:    ["mocha"],
    plugins:       [
        "karma-phantomjs-launcher",
        "karma-mocha",
        "karma-sourcemap-loader",
        "karma-webpack"
    ],
    preprocessors: {"./socialhome/**/app/tests/**/*\.tests\.js": ["webpack", "sourcemap"]},
    reporters:     ["dots"],
    singleRun:     true,
    webpack:       wpConf
})
}

again in your package.json :

"scripts": {
   "dev": "./node_modules/webpack/bin/webpack.js --watch",
   "test": "./node_modules/karma/bin/karma start"
}

in order to use the latest ECMAScript syntax, I passed Karma via webpack before launching test.

I hope this help.