jest-puppeteer-istanbul

Using Playwright? Check https://github.com/ccpu/jest-playwright-istanbul, which is a fork of this project.

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.

Troubleshooting

If you can't get the code coverage correctly when using the Jest from IntelliJ IDEA or WebStorm, that's because the IDE ignores jest-puppeteer-istanbul/lib/reporter in the jest.config.js in favour of its own Jest reporter. You can add --reporters jest-puppeteer-istanbul/lib/reporter in your IDE's Jest configuration like below to fix this.