What is the most convenient way to open a Jest Icov coverage report from Visual Studio Code?

Question

Ok, so here is the generic way:

• run jest --coverage or wrap it as a package.json script and run that
• Report is generated, navigate to coverage/Icov-report and open index.html
  • you can have an 'open in browser' extension installed, that way you can open it without actually going into files explorer, but by right-clicking the index.html and selecting one of the added context menu options.

I have not found a better out-of-the-box way to do it. My improved version is in the answers.

Answer 1

And here is how I improved this experience:

• Have following scripts in package.json
  • "test:cov": "jest --coverage",
  • "posttest:cov": "ts-node commands/open-coverage.command.ts",
• Contents of open-coverage.command.ts look like this:

import { resolve } from 'path';
import { exec } from 'child_process';

const url = resolve(__dirname, '../coverage/lcov-report/index.html');
const start =
  process.platform == 'darwin'
    ? 'open'
    : process.platform == 'win32'
    ? 'start'
    : 'xdg-open';
exec(`${start} ${url}`);

• run npm run test:cov, it will run your tests, and open report in your default browser.
  • Tested in Firefox, coverage opened in a new tab, tab is focused.

Is there anything that can improve the experience further? The only thing that comes to mind is just some extension, which will add an easily-accessible button to the VSCode UI which will open you a report in a default browser when you click on that button, but I have yet to encounter such functionality.

---

Credits for browser-opening code sample go to this answer https://stackoverflow.com/a/49013356/1762820!