Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ocavue/jest-puppeteer-istanbul
Collect code coverage information from end-to-end jest puppeteer tests
https://github.com/ocavue/jest-puppeteer-istanbul
chrome coverage e2e integration-testing istanbul jest jest-puppeteer puppeteer
Last synced: 3 months ago
JSON representation
Collect code coverage information from end-to-end jest puppeteer tests
- Host: GitHub
- URL: https://github.com/ocavue/jest-puppeteer-istanbul
- Owner: ocavue
- License: mit
- Created: 2019-09-12T15:35:33.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-18T12:06:56.000Z (about 1 year ago)
- Last Synced: 2024-10-19T21:55:00.961Z (3 months ago)
- Topics: chrome, coverage, e2e, integration-testing, istanbul, jest, jest-puppeteer, puppeteer
- Language: TypeScript
- Homepage:
- Size: 1.6 MB
- Stars: 27
- Watchers: 3
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# jest-puppeteer-istanbul
> Using Playwright? Check https://github.com/ccpu/jest-playwright-istanbul, which is a fork of this project.
## Install
```bash
yarn add -D jest-puppeteer-istanbul
// or
npm install -D jest-puppeteer-istanbul
```
## Configure
### [1/4]
Make sure that you have [Jest](https://github.com/facebook/jest) and [Babel](https://github.com/babel/babel) installed and configured.
### [2/4]
Install [`babel-plugin-istanbul`](https://www.npmjs.com/package/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:
```javascript
// .babelrc.js
const plugins = [ /* Your babel plugins */ ]
if (process.env.NODE_ENV === "development") {
plugins.push("istanbul")
}
module.exports = {
plugins: plugins
}
```
```json5
// 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:
```js
{
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](https://github.com/smooth-code/jest-puppeteer), jest-puppeteer will do it for you and you can skip this step. Otherwise you need to do it yourself, like below:
```js
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](https://github.com/ocavue/jest-puppeteer-istanbul/tree/master/examples) for complete examples.
## Troubleshooting
If you can't get the code coverage correctly when using the Jest from [IntelliJ IDEA](https://www.jetbrains.com/help/idea/running-unit-tests-on-jest.html) or [WebStorm](https://www.jetbrains.com/help/webstorm/running-unit-tests-on-jest.html#ws_jest_running_tests), 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.
