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.
Top comments (0)