VUE CLI 3 - Testing Single-File Components with Mocha + webpack - testing

Question

I am trying to follow the documentation mentioned here Vue Test Utils.
Below is what I currently have set up.
Project setup: Vue CLI 3.2.1 with Node v8.11.2
devDependencies:
"#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"
And nyc config inside package.json also:
"nyc": {
"include": [
"src/**/*.(js|vue)"
],
"instrument": false,
"sourceMap": false
},
vue.config.js:
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"
}
My test folder structure looks like this:
My test code looks like this:
So far I tried running these commands:
"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"
If I run test-ci it will output this: WEBPACK Compiled successfully in 631ms
But it is just a blank page after if I ran cover, then the output comes out as nothing being log by nyc:
What am I doing wrong here?

Answer 1

I was facing the same issue and including vue and js files separately fixed it for me.
"nyc": {
"include": [
"src/**/*.js",
"src/**/*.vue"
],
"instrument": false,
"sourceMap": false
},

Answer 2

Despite using node v10.16.0 and vue-cli 3.11.0, I faced the same problem here. Mohit's answer didn't worked, but the following syntax did:
// package.json
"nyc": {
"extension": [
".js",
".vue"
]
},