React component to measure code coverage of QA

To measure code coverage, first instrument the build using babel-plugin-istanbul.

Then in your React application, add React components from npm package to display code coverage results.

npm install istanbul-coverage-display

Add the summary component in all pages. It gets added at fixed position in the bottom left corner of the screen.

import { CoverageSummary } from 'istanbul-coverage-display'

Optionally, Add the detail component in a specific route in the application, say /coverage.

import { CoverageDetail } from 'istanbul-coverage-display'

By providing the onNavigate prop in CoverageSummary, we can navigate to the route having the CoverageDetail component.

<CoverageSummary onNavigate={navigateToDetail} />

For more information, why we need this for QA testing, check out my blog.

There is also a demo for this component.