Vscode-jest: Coverage overlay does not appear if coverage was collected with `jest --coverage` rather than `collectCoverage: true` in `jest.config.js`

[garyking]

Environment

1. node -v: v8.11.2
2. npm -v: 6.4.0
3. npm ls jest or npm ls react-scripts (if you haven’t ejected): [email protected]
4. your vscode-jest settings if customized:

  "jest.enableCodeLens": false,
  "jest.pathToJest": "node_modules/.bin/jest",

1. Operating system: Mac 10.13.5 (17F77)

Prerequisite

• are you able to run jest test from command line? Yes
• how do yo run your tests from command line? (for example: npm run test or node_modules/.bin/jest) jest --coverage

Steps to Reproduce

If a project does not have collectCoverage: true in jest.config.js, and instead collects coverage through jest --coverage, then this extension does not show the coverage overlay for the project. I'm talking about the small text at the top of the file does not appear, and the color highlighting does not appear, when using Toggle Coverage Overlay, even though there is uncovered code in the file.

The output of both methods of coverage collection result in the exact same HTML output, so I don't know why it would matter, but it definitely seems to. I'm guessing because this extension only looks for that key in the config, rather than checking the existence of the coverage files themselves?

If I add collectCoverage: true to jest.config.js, then run npx jest, then reload VSC, then the overlay will work.

[connectdotz]

what if you do this:

"jest.pathToJest": "node_modules/.bin/jest --coverage"

[crichmond1989]

I have the same issue. I tried using "node_modules/.bin/jest --coverage", but that didn't help. Also gave "npm run cover --" a try. My cover script is: "jest --coverage".

[rschoch]

I can attest to the same issue and i don't want to put the collectCoverage: true in the jest.config.js because it obviously is slower in test execution time. any workarounds lads?

[connectdotz]

can you guys provide a sample repo?

[nasreddineskandrani]

same issue. I can't see the overlay (with or without toggle)
I tried collectCoverage: true in package.json jest config. Seems not working
If you need help on this can we tag this issue help wanted? because it's a pain without coverage seriously.

[nasreddineskandrani]

@connectdotz
a sample repo with the problem
https://github.com/nasreddineskandrani/full-example-angular

commands:

> yarn install
> yarn run testjest:watch -- --coverage

p.s. for any failing test just remove the test file (it's a playground for me)

[nasreddineskandrani]

So i debugged the extension. I find out it was a sourcemap problem so i added ts-jest and now it's working with collectCoverage: true.

discovered this new issue when trying to get the coverage: https://github.com/jest-community/vscode-jest/issues/411

[connectdotz]

looks like there are a few issues entangled in this thread:

• First, it's important to separate the coverage summary (_the small text appeared on the top of the src file_) from coverage overlay: summary should appear as long as jest produced the coverage info,; while overlays would have an extra dependency - sourcemap - to map source location for the transpiled files such as typescripts.

vscode-jest won't be able to generate such sourcemap as it is highly depending on your transpile mechanisms (babel, react-native, typescripts etc) and therefore it's your responsibility to ensure such map is produced... (although some examples in the doc might be quite helpful...)

• Now let's look at the original question:

Coverage overlay does not appear if coverage was collected with jest --coverage rather than collectCoverage: true in jest.config.js

I tried both ways in the sample repo and found no such discrepency, as far as the coverage summary goes (since we are testing if the coverage is run).

One thing to note that when you update the config file, jest (if it findes it) will automatically pick up; but to add the command line option, you will have to configure it via jest.pathToJest, which you can verify by turning on the debug mode.

For people who had problem passing --coverage, if you can't provide a sample repo to showcase such scenario, I am afraid there is not much to go on...

• Now the overlay, yes the overlay is not displayed properly in @nasreddineskandrani repo, and you did the right thing to separate it into a different issue.

[garyking]

What eventually fixed this issue for me, was to use the following VSC setting:

  "jest.pathToJest": "node_modules/.bin/jest --coverage --watchAll",
  "jest.runAllTestsFirst": false,

[tejasmal56]

Hi ,
I am facing an issue where in when the coverage report is generated iam not able to see the bins which are getting covered, it only shows the bins which are uncovered. I am using cadence tool with imc command and generating a .html file.
Is their any option to be included when generating the coverage?
Please help me out as to how i can view the bins which are hit.

Thanks in advance.

[pmcelhaney]

Maybe not entirely relevant, but I want to write it down somewhere so I don't forget. Having the extension output coverage data to its own directory helps. Now I don't have the plugin and the CLI overwriting each others' data.

  "jest.pathToJest": "node_modules/.bin/jest --coverage --coverageDirectory "./coverage/vscode" --coverageReporters lcov,
  "jest.runAllTestsFirst": false,