How to get code coverage report from jest-junit in React project - react-native

Question

According to this article I'd like to get jest-junit code coverage report (Option 2 in article)
So, in my package.json I invoke jest like this: "test": "jest --config=jest.config.js",
jest.config.js includes these settings:
module.exports = {
preset: 'react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
setupFiles: ['./jest.setup.js'],
collectCoverage: true,
coverageDirectory: 'src/testCoverage',
coverageReporters: [ "text"],
reporters: ["default",
["jest-junit", {usePathForSuiteName: true, outputDirectory: 'src/testCoverage'}]
],
testResultsProcessor: "jest-junit"
};
I did in this way because the written jest code in package.json doesn't work for me.
When I execute npm run test I get coverage data in src/testCoverage folder and junit.xml
Then I execute test stage in Jenkins pipeline:
stage('test') {
steps{
sh script:'''
#!/bin/bash
npm install -g yarn
yarn install
yarn add --dev jest-junit
npm run test
'''
}
post {
always {
junit 'src/testCoverage/junit.xml'
}
}
}
But I don't see junit coverage report in Jenkins, while the article says that
The line calling junit will publish the report that npm run test created
The only thing that I have - this is test result report of passed and failed tests.
Why I don't get junit coverage report in Jenkins? What should I do or change?

Answer 1

This happens because the junit.xml contains only the list of test cases executed and their duration.
In order to export the line coverage, you need some other coverage reported, for example, cobertura:
coverageReporters: ['text', 'cobertura'],
It will produce coverage/cobertura-coverage.xml file containing the coverage information. Now you can use junit.xml to report the list of tests and cobertura-coverage.xml to report the line coverage to your CICD system.