jest-puppeteer-istanbul

Install

yarn add -D jest-puppeteer-istanbul
// or
npm install -D jest-puppeteer-istanbul

Configure

[1/4]

Make sure that you have Jest and Babel installed and configured.

[2/4]

Install babel-plugin-istanbul and add it to your Babel config.

You should ONLY use this plugin when you are in development mode. This plugin will add a lot of code for keeping track of the coverage statements. You definitely won't want them in your final production code.

Babel configuration examples:

// .babelrc.js
 
const plugins = [ /* Your babel plugins */ ]
if (process.env.NODE_ENV === "development") {
  plugins.push("istanbul")
}
module.exports = {
  plugins: plugins
}

// babel.config.json
 
{
  "plugins": [
    // Your babel plugins
  ],
  "env": {
    "development": {
      "plugins": [
         "istanbul"
      ]
    }
  }
}

[3/4]

Update your Jest configuration:

• Add json to coverageReporters. Since the defualt value of coverageReporters has json inclued, you don't need to change coverageReporters if you havn't specify it.
• Add jest-puppeteer-istanbul/lib/setup to setupFilesAfterEnv.
• Add jest-puppeteer-istanbul/lib/reporter to reporters.

Notice:

If custom reporters are specified, the default Jest reporters will be overridden. To keep default reporters, default can be passed as a module name.

A Jest configuration example:

{
  coverageReporters: ["json", "text", "lcov"],
  setupFilesAfterEnv: ["jest-puppeteer-istanbul/lib/setup"],
  reporters: ["default", "jest-puppeteer-istanbul/lib/reporter"],
  collectCoverage: true,
}

[4/4]

jest-puppeteer-istanbul need to access puppeteer page from global variable page to get coverage information. If you use jest-puppeteer, jest-puppeteer will do it for you and you can skip this step. Otherwise you need to do it yourself, like below:

beforeAll(async () => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    global.page = page
})
describe("E2E Tests", () => {
    test(async () => { /* Your test code */ })
})

Examples

Check this link for complete examples.