How to enable Istanbul code coverage for the mocha plugin? #1363
Comments
|
I don't know it is an expected answer, but it worked for me by following that mocha-webpack guide and adding the loader to vue.config.js. You can check whether the rule is successfully added with Also, I changed - "test:unit": "vue-cli-service test:unit",
+ "test:unit": "nyc --reporter=lcov --reporter=text vue-cli-service test:unit", |
|
Me too! I feel that coverage should be part of vue-cli. I can look at how challenging this would be to add in a PR |
|
Here's how I made test coverage work for both UPDATE: This comment is outdated, please check out @stephsavoie's solution below. [1/4] Install
|
|
Hi, I followed your steps but something gone wrong. I'm getting
What is your Also, my And my |
|
@caugner thanks, your solution works for me if I use this as |
|
Thanks @caugner , That solution worked for me as well. I got that from this issue. |
|
@caugner can you make example repository on github ? i can't make it work. Very frustrated. I can't find where vue.config.js locate in. Should have use Jest for testing instead of waste time configure this. |
|
I know that coverage is included in Jest by default, should we generate the coverage configuration described above when creating a new Vue app with the Mocha+Chai test options? |
|
I have updated to vue-cli 3.0.4 and nothing is working. |
|
Does anyone have a working example project for test coverage for vue-cli 3.0.x with vue-cli-mocha-plugin? There are very little examples and the snippets we found do not work. |
|
In later version of webpack (shipped in vue-cli) the const path = require('path')
if (process.env.NODE_ENV !== 'production') {
config.devtool('eval')
config.module
.rule('istanbul')
.test(/\.(js|vue)$/)
.enforce('post')
.include
.add(path.resolve(__dirname, '/src'))
.end()
.use('istanbul-instrumenter-loader')
.loader('istanbul-instrumenter-loader')
.options({ esModules: true })
} |
|
I had similar problems and neither @oimou nor @caugner solutions worked. I finally could track down the mistake: error messages. |
|
I can not get this working and I have the same issue as @jdoubleu when i created a project using vue-cli@3.2 . It produces a coverage folder but there is no line coverage in the report. just the same as the out put of the cli below. I have the same nyc config in my package.json as @yusufkaracin My vue.config.js file |
|
I could finally fix the issue for me and it slightly differs from @caugner solution. Disclaimer: My environment might differ from yours:
Steps to reproduceAssuming you have already install the mocha plugin. 1.Install the 2.Add the module.exports = {
...
chainWebpack: config => {
...
if (isTesting) {
config.module.rule('js')
.use('istanbul')
.loader('istanbul-instrumenter-loader')
.options({ esModules: true })
.before('babel-loader')
config.output
.devtoolModuleFilenameTemplate('[absolute-resource-path]')
.devtoolFallbackModuleFilenameTemplate('[absolute-resource-path]?[hash]')
config.devtool('inline-cheap-module-source-map')
}
}
}
3.Update your test command to include all files (even vue). This is required so the instrument loader will also take non tested files into account. Also wrap the test command with "test:unit": "vue-cli-service test:unit 'src/renderer/**/*.spec.js'",
"coverage:unit": "nyc vue-cli-service test:unit 'src/renderer/**/*.{js,vue}'"4.(optional) Add a {
"instrument": false,
"sourceMap": false,
"reporter": [
"lcov",
"text",
"text-summary"
],
"exclude": [
"src/renderer/**/*.spec.js",
"src/renderer/__mocks__/"
]
}At the end this worked for me and the coverage of normal modules seems to be accurate. However I couldn't get coverage reports of Update: Using before caused the coverage to fail because of exceeded memory usage ( The My configuration changed to that ( |
@martinnaughton I had similar problems, did you solve this problem? |
|
I am also getting this error. Couldn't find out any solution... |
Im also having this problem, I'm also using Typescript and followed this tutorial for typescript |
|
This config is working for me, sort of : And I removed For .vue files, the |
|
can anyone help me I'm using @vue/cli-plugin-unit-mocha and Typescript, added this in my vue.config.js const path = require('path')
config.module
.rule('istanbul')
.test(/\.(ts|vue)$/)
.enforce('post')
.include.add(path.resolve(__dirname, '/src'))
.end()
.use('istanbul-instrumenter-loader')
.loader('istanbul-instrumenter-loader')
.options({ esModules: true })here my nyc config "nyc": {
"check-coverage": true,
"per-file": true,
"lines": 90,
"statements": 90,
"functions": 90,
"branches": 90,
"include": [
"src/**/*.{ts,vue}"
],
"reporter": [
"lcov",
"text-summary"
],
"extension": [
".ts", "*.vue"
],
"cache": true,
"all": true
}all tests passing, but no coverage generated. |
|
@silva96 There are maybe other issues but I'm pretty sure you need to remove the slash from |
|
thanks @rndmerle I fixed that and then the error decribed by others appeared. |
|
Using a dedicated post-rule never worked for me either. What did work was to plug istanbul before babel-loader/ts-loader and cache-loader: Make sure to check the resulting rules with |
@rndmerle that didn't make the trick I believe, can you provide your config nyc in package.json, babel config and vue.config.js ? |
|
Here are the config files. However, I'm not using Mocha at all. I came across this thread while trying to configure the coverage on Cypress tests. .nyrc.json babel.config.js There is nothing relevant anymore in vue.config.js because I switched from istanbul-instrumenter-loader to babel-plugin-istanbul. Both were working tho. |
|
@rndmerle unfortunately it didn't work switching from istanbul-instrumenter-loader to babel-plugin-istanbul it gives me this error now. |
|
Based on @caugner 's answer, I made it work in a simpler way (by skipping the step 2 and enhanced a bit the nyc configuration in package.json) I'm using Vue CLI-3 with Mocha-webpack as my tests runner. Here's my current configuration: [1/3] Install babel-plugin-istanbul + configure it in babel.config.js[2/3]: Install
|
|
@stephsavoie Your solution is worked, Thanks a lot. |
|
@stephsavoie with that solution my |
|
None of the solutions on here worked for me (either Vue files were excluded, or the line numbers and highlighting in all files was thrown off in the coverage reports). Basically, setting There's an (admittedly hacky) way to fix this, and it involves just changing one line in one of Istanbul/nyc's dependencies. From the directory containing your Of course, that's annoying to have to do every time the file gets changed (I'm looking at you, yarn), so you can automate running that script every time you go to run your tests. Just for the sake of completeness, I wrote up a short gist that details everything you need to do to add tests (with coverage) to a Vue project: https://gist.github.com/lsapan/3bfd0ffc0fb3d4a036fce84f6eea142e |
|
@stephsavoie thank you, your solution worked for me, but I'm wondering about the idea behind using tests/setup.js, what's the purpose of it as you did not post the content of this file? |
|
@stephsavoie This works great, however once I upgraded from vue cli3 to version 4, it no longer works. Have you had any luck with the newer version of the cli? |
|
I tried a bunch of things but still nyc report is not loading with vue files. Did anyone succeed with vue-cli-4? |
|
@batuhantozun did you try my guide above? It’s a bit hacky, but it works. https://gist.github.com/lsapan/3bfd0ffc0fb3d4a036fce84f6eea142e |
|
Hello for me juste work with Script in package.json .nycrc: {
"extension": [
".js",
".vue"
],
"instrument": false,
"sourceMap": false
}vue.config.js: module.exports = {
chainWebpack: (config) => {
if (process.env.NODE_ENV === 'test') {
config.module.rule('js')
.test(/\.js$/)
.use('istanbul-instrumenter-loader')
.loader('istanbul-instrumenter-loader')
.options({
esModules: true,
});
}
},
};Packages: Edit: {
"source": ["file.vue"],
"sourceRoot": ["/src/components/" ]
} This path it's computed in So this produce path like
The generation of source map seems correct for me. For me the problem is in istanbul.js so I have comment this issue to correct the build path in this case. |
|
@sebtiz13 config worked for me! |
|
Hey, @arielj which version of vue-cli are you using? |
|
@stripathix I see code coverage information for the components (not the test files) but I do have that problem on the duplicated I have vue 2.6.11 and vue-cli-service 4.2.0 inside packages.json |
|
Hi all, sorry if it's an obvious question, but I'm new to the Vue. |
|
I've tried a few of the solutions here on a Vue CLI (version Have a repro up here of the 0% coverage cropping up: https://github.com/Jack-Barry/vue-with-istanbul Not really sure where to go from here. Feels like I'm in the right neighborhood but walked into the wrong building or something. Edit: with some tweaks to the config in the demo repo, I've been able to get closer to the goal but still seeing 0% coverage |
|
Is there anyone who could get it working with TypeScript so far 😢? |
|
Another comment here to bump this every other month 😞 |
|
@undergroundwires: install packagesnpm install nyc istanbul-instrumenter-loader cross-env --save-devvue.config.js// ... other options
,
chainWebpack: config => {
if (process.env.coverage === "true") {
config.module
.rule("ts")
.use("istanbul")
.loader("istanbul-instrumenter-loader")
.options({ esModules: true })
.before("ts-loader");
}
}nyc.config.jsmodule.exports = {
all: true,
instrument: false,
sourceMap: false,
include: ["src/**/*.{ts,vue}"],
reporter: ["lcov", "text", "text-summary"],
extension: [".ts", ".vue"]
};package.json"scripts": {
"test:unit": "cross-env coverage=true nyc vue-cli-service test:unit",
}, |
|
Hi @bingnz , thanks for your time and effort into compiling such a nice solution 👏🏿 It works cleanly and reports in a pretty way. However the problem I find with this and other solutions is that they do not report untested classes. So the coverage result is always so high which in fact is not so useful. So |
|
Bump for a way to view coverage on Mocha test suite. Going to try Wallaby for now. |
|
I am having an issue with sinon.js ounce I added the configuration for Istanbul the following started to happen and some tests are failing. Warning in .node_modules/sinon/pkg/sinon-esm.js |
|
Any examples of usage with nuxt ? |
Facing the same issue. |
|
Is there an alternative unit test framework that has coverage built-in that is known to work with Vue? I've tried every iteration of this setup and can't get it to read anything other than js files. |
and others
What problem does this feature solve?
Coverage reporting for unit tests
What does the proposed API look like?
Is there a way to enable coverage for the mocha plugin? When set up manually on another project, you add the istanbul coverage instrumenter as a webpack loader like this:
And then you need to add
lcovas a reporter.This explanation is pretty comprehensive:
https://github.com/zinserjan/mocha-webpack/blob/master/docs/guides/code-coverage.md
The text was updated successfully, but these errors were encountered: