Jest code coverage generation examples
This tutorial explains about following things
- Jest Code Coverage report
- Jest find uncovered code
- Jest code coverage generates html, info, and json format
- Jest code coverage for Single file
Code Coverage is an important metric for code quality, It is a percentage of code-written test cases.
How to Generate Code Coverage Report
This tutorial does not talks about how to add jest to node projects.
Jest CLI provides a --coverage option to generate code coverage for javascript files in a project.
jest --coverage
It outputs code coverage for all files with percentages for code statements, branches, functions, and lines of code. It also includes Uncovered Line percentages.
Here is a command line output
PASS ./simple.test.js
---------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
---------------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
add.js | 100 | 100 | 100 | 100 |
calculator.js | 100 | 100 | 100 | 100 |
simple.js | 100 | 100 | 100 | 100 |
---------------|---------|----------|---------|---------|-------------------
It generates the reports in a default coverage folder of a project.
You can also change the default generated folder using the below command
jest --coverage --coverageDirectory='codecoverage'
codecoverage folder contains Generate HTML files
- Open codecoverage/lcov-report/index.html, You will see all file’s code coverage report statistics.
- YOu can check individual files for uncovered code coverage or lines and gives a percentage of code-covered tests.
--coverageDirectory option can also be configured using jest.config.js
The location of the code coverage folder is configured in jest.config.js with coverageDirectory attributes
module.exports = {
collectCoverage: true,
coverageDirectory: "codecoverage",
};
There are some other attributes related to coverage
collectCoverage: true/false Tells to collect coverage during test execution
coverageDirectory: Jest results in a code coverage outputs into a folder.
coverageProvider: ‘v8’ or babel coverage provider to inspect code coverage
coverageReporters: [“json”,“text”,“lcov”,“clover”]
coveragePathIgnorePatterns : [“/node_modules/“]
collectCoverageFrom=[‘src/**/*.{js,ts}‘]
You can also run code coverage report using the different format with coverageReporters
jest --coverage --coverageReporters="json-summary"
It generates coverage in json format in a coverage-summary.json.
It contains the total report as well as each file’s stastics
{
"total": {
"lines": {
"total": 4,
"covered": 4,
"skipped": 0,
"pct": 100
},
"statements": {
"total": 6,
"covered": 6,
"skipped": 0,
"pct": 100
},
"functions": {
"total": 4,
"covered": 4,
"skipped": 0,
"pct": 100
},
"branches": {
"total": 0,
"covered": 0,
"skipped": 0,
"pct": 100
}
},
"B:\\jest\\add.js": {
"lines": {
"total": 1,
"covered": 1,
"skipped": 0,
"pct": 100
},
"functions": {
"total": 1,
"covered": 1,
"skipped": 0,
"pct": 100
},
"statements": {
"total": 2,
"covered": 2,
"skipped": 0,
"pct": 100
},
"branches": {
"total": 0,
"covered": 0,
"skipped": 0,
"pct": 100
}
},
"B:\\jest\\calculator.js": {
"lines": {
"total": 1,
"covered": 1,
"skipped": 0,
"pct": 100
},
"functions": {
"total": 1,
"covered": 1,
"skipped": 0,
"pct": 100
},
"statements": {
"total": 2,
"covered": 2,
"skipped": 0,
"pct": 100
},
"branches": {
"total": 0,
"covered": 0,
"skipped": 0,
"pct": 100
}
},
"B:\\jest\\simple.js": {
"lines": {
"total": 2,
"covered": 2,
"skipped": 0,
"pct": 100
},
"functions": {
"total": 2,
"covered": 2,
"skipped": 0,
"pct": 100
},
"statements": {
"total": 2,
"covered": 2,
"skipped": 0,
"pct": 100
},
"branches": {
"total": 0,
"covered": 0,
"skipped": 0,
"pct": 100
}
}
}
Run the below command to generate text-summary reports
jest --coverage --coverageReporters="text-summary"
It generates coverage in text format in a coverage-summary.json.
It contains the total report as well as each file’s statistics
=============================== Coverage summary ===============================
Statements : 100% ( 6/6 )
Branches : 100% ( 0/0 )
Functions : 100% ( 4/4 )
Lines : 100% ( 4/4 )
================================================================================
JEST npm scripts for Generate code coverage
As of now, we have seen how to generate code coverage using JEST CLI.
To automate node project for code coverage, We have written an npm scripts
In package.json, add a line to scripts that contains jest commands
{
"scripts": {
"test": "jest --config=jest.config.json --coverage --coverageReporters=json-summary"
}
}
Next, You can run from the command line using the below command
npm run test
For yarn users, use the below command
yarn test
If you want to pass command line arguments to npm run test command, use the below syntax.
For example, You have package.json contains below things
{
"scripts": {
"test": "jest --config=jest.config.json "
}
}
Now, use -- to pass --coverage --coverageReporters=json-summary options.
npm run test -- --coverage --coverageReporters=json-summary
Any options after -- are passed as command line arguments to script commands in package.json
For yarn users
yarn test --coverage --coverageReporters=json-summary
How to generate Code Coverage for a single file.
To generate code coverage for all files, use the below configuration in either package.json or jest.config.js package.json:
"jest": {
"collectCoverage": true,
"coverageReporters": ["json", "html"]
},
jest.config.js:
module.exports = { collectCoverage: true, coverageDirectory: “coverage”, collectCoverageFrom: [‘src/**/*.{js,ts}’], }
You can still use the command line to generate coverage for all project files
```markdown
jest --coverage --collectCoverageFrom: ['src/**/*.{js,ts}'],
To run code coverage for a single file, use the below command
npm test calculator.test -- --coverage --collectCoverageFrom=src/calculator.js
For yarn users
yarn test calculator.test -- --coverage --collectCoverageFrom=src/calculator.js