Jest: Coverage in HTML view is broken

[adyz]

🐛 Bug Report

To Reproduce

Steps to reproduce the behavior: (same as: https://jestjs.io/docs/en/getting-started)

• Create a new folder
• Init a new npm project with npm init
• Add Jest as a dependency npm install --save-dev jest
• Created a src folder with a main.js file and a main.spec.js test file (one containing sum function and the other the tests as in the Jest docs)
• Added a test script in package.json.
• Run the script with npm test -- --coverage
• When opening the coverage/lcov-report/index.html the HTML does not show the coverage report numbers.

GIT repo here: https://github.com/adyz/jest-coverage-bug-no-ts

Expected behavior

The coverage/lcov-report/index.html should show the actual report numbers

Link to repl or repo (highly encouraged)

https://github.com/adyz/jest-coverage-bug-no-ts

envinfo

npx: installed 1 in 1.36s

  System:
    OS: macOS 10.15.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 13.6.0 - /usr/local/bin/node
    Yarn: 1.12.3 - ~/.yarn/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  npmPackages:
    jest: ^24.9.0 => 24.9.0 

Let me know if I should send this to the istanbul.js as well or just there. Not sure where to go from here.
I've also noticed that on old projects the report is fine until I remove the node_modules and reinstall.

Thanks a ton!

[SimenB]

This seems like a bug in istanbul somewhere, as the text reporter works correctly.

@coreyfarrell have you seen this before?

Note that it works correctly on Jest master (which is using the new major of istanbul deps)

[SimenB]

https://github.com/facebook/jest/issues/9389#issuecomment-573003422

diff --git i/package-lock.json w/package-lock.json
index 4ae4388..9e5ba91 100644
--- i/package-lock.json
+++ w/package-lock.json
@@ -2186,9 +2186,9 @@
       "dev": true
     },
     "handlebars": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.6.0.tgz",
-      "integrity": "sha512-i1ZUP7Qp2JdkMaFon2a+b0m5geE8Z4ZTLaGkgrObkEd+OkUKyRbRWw4KxuFCoHfdETSY1yf9/574eVoNSiK7pw==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.3.tgz",
+      "integrity": "sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==",
       "dev": true,
       "requires": {
         "neo-async": "^2.6.0",
diff --git i/package.json w/package.json
index 901fec3..2971de5 100644
--- i/package.json
+++ w/package.json
@@ -9,6 +9,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "handlebars": "~4.5.3",
     "jest": "^24.9.0"
   }
 }

[SimenB]

I've quickly opened up https://github.com/wycats/handlebars.js/issues/1636 upstream linking back to this issue for the reproduction

[coreyfarrell]

I've pushed the latest-2.x branch to https://github.com/istanbuljs/istanbuljs with a cherry-pick of the handlebars removal patch.

Publishing this to npm is difficult for me as it's not possible to publish under the npm next tag, [email protected] is already latest so any 2.x backport will automatically be available in production.

I'd appreciate anyone who has the time to manually test my patch. Due to istanbul-reports being in a monorepo it's not possible to have npm install directly from git, the following process must be followed:

• git clone https:/github.com/istanbuljs/istanbuljs
• git checkout latest-2.x
• cd istanbuljs/packages/istanbul-reports
• npm pack
• add "istanbul-reports": "file:absolute/path/to/istanbul-reports-2.2.5.tgz" to the dependencies of your project
• do what is necessary to ensure istanbul-reports from the tarball is the only version installed in your project (npm ls handlebars should not show it being installed by istanbul-reports)
• test your project, verify that HTML reports work

I've done this already with the self-tests of [email protected] and it seemed to work but I'd like to get some confirmation before I can publish this fix to npm.

[adyz]

Hi @coreyfarrell,

I've followed your steps it seems to work well with the repo posted on this issue: https://github.com/adyz/jest-coverage-bug-no-ts

• added the generated tgz file (generated following your steps) in package.json"istanbul-reports": "file:../test-istanbul/istanbuljs/packages/istanbul-reports/istanbul-reports-2.2.5.tgz"
• removed package-lock.json and node_modules
• ran npm install again
• ran npm npm test -- --coverage and the HTML looks fine now

Thanks a ton!

[adyz]

Actually, I've tried to add my changes on a separate branch on my repo and the HTML it's not working anymore... I'll try again this weekend alt will let you know... sorry for the false positive

[coreyfarrell]

Thanks for testing, istanbul-reports gets 6+ million downloads per week so releasing a broken version would bombard me with reports (I suspect many people are not seeing this handlebars bug due to package-lock files). I'm going to give this a little time to hopefully get a couple more testers before I publish (I'm also still fighting with CI for the istanbuljs repo itself).

[coreyfarrell]

BTW you'll want to remove package-lock.json, not package.json. I'm guessing that was just a typo here.

[adyz]

Yes, typo, sorry. Not sure what is happening with my machine that first time worked and the second time did not. Definitely wait a bit more before release and more tests.

[coreyfarrell]

In the case where it fails what does npm ls handlebars show?

[adyz]

Sorry for the late response @coreyfarrell

└─┬ [email protected]
  └─┬ [email protected]
    └─┬ @jest/[email protected]
      └─┬ @jest/[email protected]
        └─┬ [email protected]
          └── [email protected] 

Not sure what was the desired version.

I've created a branch here with the changes:
https://github.com/adyz/jest-coverage-bug-no-ts/tree/test/local-istanbul

I hope it helps!

Thank you!

[coreyfarrell]

Yes this helps, [email protected] already had a backport that didn't get merged into master and I forgot about, so my patched copy of [email protected] wasn't being used by jest. I've pushed a couple more commits, please git pull, run npm pack again (this should create istanbul-reports-2.2.6.tgz), then update the tarball version in your repository and reinstall. Once this is done npm ls handlebars should not show any result.

[adyz]

Wuhu! Works! The HTML is generated 🥳
I'll be able to do more tests on other projects on Monday using this method if you wish.

[adyz]

Pushed the changes and the newly generated package here: https://github.com/adyz/jest-coverage-bug-no-ts/tree/test/local-istanbul

[SimenB]

Let's keep this open for visibility until a new version of istanbul-reports@2 is published to npm

[coreyfarrell]

@adyz thanks for the update. No further testing is needed. I'm planning to release a new version of istanbul-reports@2 soon. Will comment again when that is complete.

[coreyfarrell]

istanbul-reports 2.2.7 is now published to npm. Can anyone confirm this fixes the issue as experienced by jest users?

[SimenB]

Deleting the existing istanbul-reports from your lockfile and re-running npm or yarn should fix the issue. It works in the project I tested, so I think we're good to go 👍

[adyz]

I've posted this bug for a project that now is working perfectly!

I've removed the node_modules folder and the package-lock.json file.

Thank you!
🥳🥳🥳

[springfred]

Coverage in HTML view is broken.
npm ls handlebars
└─┬ [email protected]
└─┬ [email protected]
└─┬ [email protected]
└── [email protected]

[coreyfarrell]

@springfred [email protected] is no longer maintained (current version is 3.0.0). The best fix is to upgrade your dependencies so [email protected] or above is used. If this is not an option you will need to pin handlebars in your own package.json to 4.5.3 then perform a fresh npm install.

[SimenB]

Jest upgraded to istanbul v2 as part of the Jest v24 release (in #7016, to be exact), so upgrading to v24 should fix your issue (as it'll pull in the fixed version of istanbul-reports@2)

[dpdahal]

hello everyone's why not working this code.
{{#each posts}}

{{_id}}
{{title}}
{{status}}
{{description}}

                                    </tr>
                                {{/each}}