JestJS - show all uncovered lines in coverage report

Question

When I run the Jest coverage report, it prints out each type of coverage and the percentage by file. The last column that shows the uncovered lines gets truncated when there are more than ~4-5 lines. Is there a way to print all of the uncovered lines?

-------------------------------|----------|----------|----------|----------|----------------|
File                           |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
-------------------------------|----------|----------|----------|----------|----------------|
All files                      |    75.57 |    69.18 |    74.21 |    75.83 |                |
 js/components/catalyst        |    80.74 |    72.97 |    80.16 |    81.85 |                |
  JobGroup.jsx                 |    57.14 |       50 |    44.44 |       60 |... 33,34,38,73 |
...etc

This shows me that JobGroup.jsx has lines 33,34,38, and 73, but there are more, and I'd like to see them all at once.

Answer 1

Is there a way to print all of the uncovered lines?

I'm using React + TypeScript + Jest. In my project, I run npm test -- --coverage, and the file with the remaining uncovered lines is under the coverage directory:

<project name>\<directory>\<directory>\coverage\lcov-report\index.html

(Your file path may have a variation on the coverage part. :-))

Then I navigate to the file of interest:

All lines highlighted in pink are uncovered:

Answer 2

This is an alternative solution that some may find helpful.

Personally, I use VSCode, and there is a plugin available called "Code Coverage", it does something similar to the other answer here, by Super Jade, except it will highlight the code after you run a coverage test, like so.