Coverage measurement
- React course
- Advanced
- Lesson 47/56
- 4 min
Learn to measure and read test coverage.
Coverage measurement
Coverage measures what percentage of source code your tests touch. Vitest and Jest use c8 or istanbul to report line, branch and function percentages.
You set thresholds in config: below lines: 80 the build fails. This prevents tests from eroding over time.
Coverage is a good indicator but not a quality guarantee; you manually check that important branches are covered.
Thresholds and quality
When you set branches: 70, branch coverage below 70 percent ends the run with an error code. CI catches it and stops the build.
But 100 percent coverage does not catch every bug; a test may call a branch without checking the expected result. So you write meaningful expect assertions.
Per-file thresholds are also possible; a newly added file cannot merge with low coverage.
Practice Write the formatPrice test
Write the contents of utils.test.jsx. Import formatPrice. Inside test('formats price', () => {}) assert expect(formatPrice(120)).toBe('120 USD') and expect(formatPrice(0)).toBe('0 USD').
Starter code
// Write the formatPrice test hereSample solution
import { formatPrice } from './utils';
test('formats price', () => {
expect(formatPrice(120)).toBe('120 USD');
expect(formatPrice(0)).toBe('0 USD');
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match coverage types
| Term | Meaning |
|---|---|
lines |
Executed line ratio |
branches |
Branch coverage |
functions |
Called functions |
thresholds |
Lower bound |
2 What does 100 percent coverage mean?
- No bugs remain
- No more tests are needed
- All lines and branches are called, no quality guarantee Correct answer
- The build will finish in a minute
Explanation: 100 percent coverage is not a quality guarantee.
3 Fill in the blank: set coverage thresholds
export default {
test: {
coverage: {
thresholds: {
lines: ____,
branches: 70
}
}
}
};export default {
test: {
coverage: {
thresholds: {
lines: 80,
branches: 70
}
}
}
};Explanation: lines: 80 is a common threshold.