I have some Jest tests that are testing some React code (I am new to both Jest and React), and as shown, there is coverage on branches and functions but not statements and lines:
--------------------------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
--------------------------------|---------|----------|---------|---------|-------------------
All files | 0 | 0 | 0 | 0 |
Theme | 0 | 100 | 0 | 0 |
Theme.ts | 0 | 100 | 0 | 0 | 1-25
index.ts | 0 | 100 | 100 | 0 | 1
mergeTokens.ts | 0 | 100 | 0 | 0 | 1-20
Theme/variables | 0 | 0 | 0 | 0 |
breakpoints.ts | 0 | 100 | 0 | 0 | 5-6
components.ts | 0 | 100 | 0 | 0 | 6-50
index.ts | 0 | 100 | 100 | 0 | 1-5
palette.ts | 0 | 100 | 0 | 0 | 19
shape.ts | 0 | 0 | 0 | 0 | 6
typography.ts | 0 | 100 | 0 | 0 | 4-13
Theme/variables/component | 0 | 0 | 0 | 0 |
accordion.ts | 0 | 100 | 0 | 0 | 3-100
alert.ts | 0 | 100 | 0 | 0 | 1-67
autocomplete.ts | 0 | 100 | 0 | 0 | 1-8
breadcrumb.ts | 0 | 0 | 0 | 0 | 5
buttonGroup.ts | 0 | 100 | 100 | 0 | 3-5
buttons.ts | 0 | 0 | 0 | 0 | 1-51
cards.ts | 0 | 100 | 100 | 0 | 2-4
checkbox.ts | 0 | 0 | 0 | 0 | 1-5
chip.ts | 0 | 0 | 0 | 0 | 2-12
container.ts | 0 | 100 | 0 | 0 | 5
dataGrid.ts | 0 | 100 | 0 | 0 | 7-9
datePicker.ts | 0 | 100 | 0 | 0 | 2-9
drawer.ts | 0 | 0 | 0 | 0 | 5-6
formControlLabel.ts | 0 | 100 | 0 | 0 | 6
helperText.ts | 0 | 100 | 0 | 0 | 2-8
iconButtons.ts | 0 | 0 | 0 | 0 | 1-27
index.ts | 0 | 100 | 100 | 0 | 1-36
inputField.ts | 0 | 100 | 0 | 0 | 3-9
inputLabel.ts | 0 | 100 | 0 | 0 | 1-9
linearProgress.ts | 0 | 0 | 0 | 0 | 1-9
link.ts | 0 | 100 | 0 | 0 | 5-8
modal.ts | 0 | 100 | 0 | 0 | 1-5
pagination.ts | 0 | 0 | 0 | 0 | 1-6
paper.ts | 0 | 100 | 0 | 0 | 5-11
popover.ts | 0 | 0 | 0 | 0 | 5
radioButton.ts | 0 | 0 | 0 | 0 | 1-5
search.ts | 0 | 100 | 100 | 0 | 2-5
select.ts | 0 | 100 | 100 | 0 | 3
sideNavigation.ts | 0 | 100 | 0 | 0 | 1-6
stepper.ts | 0 | 100 | 0 | 0 | 1-5
svgIconButton.ts | 0 | 100 | 100 | 0 | 3-5
switch.ts | 0 | 100 | 0 | 0 | 1-5
table.ts | 0 | 100 | 100 | 0 | 2-80
tabs.ts | 0 | 100 | 0 | 0 | 1-5
toggleButton.ts | 0 | 100 | 0 | 0 | 1-5
tooltip.ts | 0 | 100 | 0 | 0 | 2-6
typography.ts | 0 | 100 | 0 | 0 | 5-7
--------------------------------|---------|----------|---------|---------|-------------------
However, even though there is coverage, this shows 0%:
Jest: "global" coverage threshold for statements (80%) not met: 0%
Jest: "global" coverage threshold for branches (80%) not met: 0%
Jest: "global" coverage threshold for lines (80%) not met: 0%
Jest: "global" coverage threshold for functions (80%) not met: 0%
Test Suites: 24 passed, 24 total
Tests: 151 passed, 151 total
Snapshots: 8 passed, 8 total
Time: 39.859 s
Ran all test suites.
So, my two questions are
- Why don’t I have any statement/line coverage?
- Why does the final result show 0%?
My Jest config looks as follows:
/**
* @type {import('@jest/types').Config.InitialOptions}
*/
module.exports = {
preset: 'ts-jest',
moduleFileExtensions: ['tsx', 'ts', 'jsx', 'js', 'json', 'node'],
clearMocks: true,
testPathIgnorePatterns: ['/node_modules/', '^.*\.cy\.test\.tsx$'],
modulePathIgnorePatterns: ['/migrations/', '/generators/'],
testEnvironment: 'jsdom',
testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
collectCoverage: true,
collectCoverageFrom: ['src/packages/themes/themes/Theme/**/*.{ts,tsx}'],
setupFiles: ['./test-setup.js'],
coverageDirectory: 'coverage/jest',
rootDir: './',
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80,
},
},
transform: {
'^.+\.svg$': '<rootDir>/assetTransform.js',
'^.+\.css$': '<rootDir>/assetTransform.js',
},
};