webpack - 如何使用 vue-cli 初始化项目后添加 Karma+Mocha 测试

Question

嗨，我使用 Vue-cli webpack 启动了一个项目，我犯的错误是我没有启用测试

如何将 karma+mocha 添加到我的 webpack vuejs2 开发中，是否可以重新初始化并包含测试？

Answer 1

在 package.json 中添加以下内容:

"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",

在 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
})
}

再次在你的 package.json 中:

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

为了使用最新的 ECMAScript 语法，我在启动测试之前通过 webpack 通过了 Karma。

我希望这会有所帮助。