ocavuejest-puppeteer-istanbul
Install
yarn add -D jest-puppeteer-istanbul
// or
npm install -D jest-puppeteer-istanbulConfigure
[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
jsontocoverageReporters. Since the defualt value ofcoverageReportershasjsoninclued, you don't need to changecoverageReportersif you havn't specify it. - Add
jest-puppeteer-istanbul/lib/setuptosetupFilesAfterEnv. - Add
jest-puppeteer-istanbul/lib/reportertoreporters.
Notice:
If custom reporters are specified, the default Jest reporters will be overridden. To keep default reporters,
defaultcan 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.