Testing VUE CLI 3-使用Mocha和x2B测试单文件组件；网页包

我试图遵循这里提到的文档

下面是我目前设置的内容

项目设置：Vue CLI 3.2.1和节点v8.11.2

设计依赖性：

"@vue/cli-plugin-babel": "^3.2.0",
"@vue/cli-plugin-eslint": "^3.2.0",
"@vue/cli-service": "^3.2.0",
"@vue/test-utils": "^1.0.0-beta.28",
"babel-eslint": "^10.0.1",
"babel-plugin-istanbul": "^5.1.0",
"cross-env": "^5.2.0",
"eslint": "^5.8.0",
"eslint-config-standard": "^12.0.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.0.0-0",
"expect": "^24.0.0",
"istanbul-instrumenter-loader": "^3.0.1",
"jsdom": "^13.2.0",
"jsdom-global": "^3.0.2",
"mocha": "^5.2.0",
"mocha-webpack": "^1.1.0",
"node-sass": "^4.10.0",
"nyc": "^13.1.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17",
"webpack-cli": "^3.2.1",
"webpack-node-externals": "^1.7.2"

const nodeExternals = require('webpack-node-externals')
const path = require('path')
let isCoverage = process.env.NODE_ENV === 'coverage';

module.exports = {
    mode: 'development',
    externals: [nodeExternals()],
    devtool: 'inline-cheap-module-source-map',
    output: {
        // use absolute paths in sourcemaps (important for debugging via IDE)
        devtoolModuleFilenameTemplate: '[absolute-resource-path]',
        devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ].concat(
            isCoverage ? {
                test: /\.(js|ts)/,
                include: path.resolve('src'),
                loader: 'istanbul-instrumenter-loader',
                options: { esModules: true }
            }: [],
            {
                test: /.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
            },
            {
                test: /\.ts$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'ts-loader'
            }
        )
    },
    target: 'node',
    externals: [nodeExternals()],
    devtool: "inline-cheap-module-source-map"
}

和

nyc

config-inside

package.json

还有：

"nyc": {
    "include": [
      "src/**/*.(js|vue)"
    ],
    "instrument": false,
    "sourceMap": false
  },

vue.config.js：

"@vue/cli-plugin-babel": "^3.2.0",
"@vue/cli-plugin-eslint": "^3.2.0",
"@vue/cli-service": "^3.2.0",
"@vue/test-utils": "^1.0.0-beta.28",
"babel-eslint": "^10.0.1",
"babel-plugin-istanbul": "^5.1.0",
"cross-env": "^5.2.0",
"eslint": "^5.8.0",
"eslint-config-standard": "^12.0.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.0.0-0",
"expect": "^24.0.0",
"istanbul-instrumenter-loader": "^3.0.1",
"jsdom": "^13.2.0",
"jsdom-global": "^3.0.2",
"mocha": "^5.2.0",
"mocha-webpack": "^1.1.0",
"node-sass": "^4.10.0",
"nyc": "^13.1.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17",
"webpack-cli": "^3.2.1",
"webpack-node-externals": "^1.7.2"

const nodeExternals = require('webpack-node-externals')
const path = require('path')
let isCoverage = process.env.NODE_ENV === 'coverage';

module.exports = {
    mode: 'development',
    externals: [nodeExternals()],
    devtool: 'inline-cheap-module-source-map',
    output: {
        // use absolute paths in sourcemaps (important for debugging via IDE)
        devtoolModuleFilenameTemplate: '[absolute-resource-path]',
        devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ].concat(
            isCoverage ? {
                test: /\.(js|ts)/,
                include: path.resolve('src'),
                loader: 'istanbul-instrumenter-loader',
                options: { esModules: true }
            }: [],
            {
                test: /.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
            },
            {
                test: /\.ts$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'ts-loader'
            }
        )
    },
    target: 'node',
    externals: [nodeExternals()],
    devtool: "inline-cheap-module-source-map"
}

我的测试文件夹结构如下所示：

我的测试代码如下所示：

到目前为止，我尝试运行以下命令：

"test-ci": "mocha-webpack --webpack-config vue.config.js --require test/setup.js test/**/*.js"
"cover": "cross-env NODE_ENV=coverage nyc --reporter=lcov --reporter=text npm run test-ci"

如果我运行测试ci，它将输出以下内容：

在631ms内成功编译的网页

但是如果我运行了封面，那么它只是一个空白页，那么输出结果将不会被

纽约市

记录：

---

我在这里做错了什么？

我也面临同样的问题，包括vue和js文件，分别为我解决了这个问题

"nyc": {
    "include": [
      "src/**/*.js",
      "src/**/*.vue"
    ],
    "instrument": false,
    "sourceMap": false
  },

---

尽管使用了节点v10.16.0和vue cli 3.11.0，但我在这里遇到了相同的问题。Mohit的答案不起作用，但以下语法起作用：

// package.json
  "nyc": {
        "extension": [
            ".js",
            ".vue"
        ]
  },