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

【问题标题】：How to add Karma+Mocha tests after initializing project using vue-cli使用 vue-cli 初始化项目后如何添加 Karma+Mocha 测试
【发布时间】：2018-02-09 09:30:40
【问题描述】：

您好，我使用 Vue-cli webpack 开始了一个项目，我犯的错误是我没有启用测试

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

【问题讨论】：

标签： webpack vuejs2 karma-mocha karma-webpack vue-cli

【解决方案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。

希望对你有所帮助。

【讨论】：

在 Vue cli 3 中，没有 webpack.config.js 文件。在这种情况下我应该如何处理？
@silva96。我将我的项目移动到 Vue cli 3 并使用单独的 jest.config.json 文件安装了 jest。
我们最终也做了同样的事情，开玩笑是对所有问题的回应