Jest coverage report in html missing coverage values - reactjs

I am unit testing my ReactJS app with Jest and have added configuration to get the code coverage. The coverage works well on cli but when I try to export coverage report as html the values corresponding to each file are not shown in the report. Here is my jest.config.json:
{
"roots": [
"test"
],
"collectCoverage": true,
"coverageReporters": ["text","html"],
"coverageDirectory": "<rootDir>/coverage/"
}
And here is my report generated in coverage folder inside index.html file:
As can be seen the numbers are missing. What coud be the reason when the text report has correct values shown as well. It happens only with html report.

I had this as well. Updating the package istanbul-reports to the latest version (3.0.0 at the time) fixed the issue.

Related

How can I exclude a source named test.js from being detected to be test file in a create react app?

In a create-react-app application, I have named a source file :
/src/config/env/test.js
Unfortunately, jest is now trying to execute it as a test,
I have tried to add the following in my package.json:
"jest": {
"collectCoverageFrom": [
"!<rootDir>/src/config/env/test.js",
"!<rootDir>/node_modules/"
]
}
But I still have this error:
FAIL src/config/env/test.js
● Test suite failed to run
Your test suite must contain at least one test.
at node_modules/jest/node_modules/jest-cli/build/TestScheduler.js:256:22
I am using react-scripts 2.1.3
The simplest solution here would be using the testPathIgnorePatterns configuration value, like this:
"testPathIgnorePatterns": ["\/test.js"]

Reporting Angular 2 code coverage in Jenkins - mismatch between coverage categories

We have a Jenkins build for our Angular 2 code base that is reporting on test and code coverage information in a way similar to our test and coverage reporting for our Java projects. We use Karma to generate Cobertura compatible coverage data using the following karma.conf.js:
coverageReporter: {
dir: 'coverage/',
reporters: [{
type: 'html',
dir: 'coverage'
}, {
type: 'lcovonly',
subdir: 'report-lcov'
}, {
type: 'text-summary'
},
// this is the important part:
{ type: 'cobertura', subdir: '.', file: 'cobertura.xml' }
]
}
We used the Publish Cobertura Coverage Report plugin for Jenkins and pointed it to the cobertura.xml file.
The issue we're seeing is that our actual coverage seems to be a lot less than what is reported in our Jenkins UI. I believe this is because the Jenkins categories for coverage are "Packages", "Files", "Classes", "Methods", "Lines", and "Conditionals" while the categories coming from Karma are "Statements", "Branch", "Functions", "Lines". The only two of these categories that seem to be lining up is "Lines" and that's the only one that reports a coverage number other than 100%.
Is there a way to properly translate the categories from a Karma coverage report and have it displayed in Jenkins? Any solution would also be required to show a graph of the coverage history on the build summary page.
Some screenshots:
Some of our npm test command:
Jenkins build summary page:
Jenkins coverage details screen:

configure remap-istanbul to include all source files

I am configuring my application developed on Ionic 2 with Angular 2 and TS to generate code coverage reports generated for my test files.
I am using Jasmine , Karma and remap-istanbul for Unit Testing and generating coverage reports.
refering to this wonderful post: twofuckingdevelopers.com/2016/01/testing-angular-2-with-karma-and-jasmine/
However, I am not able to list out files that do not have a spec file written for them. Is there a way to include the same in istanbul reports and generate overall coverage accordingly.
Thank You!!!
In your Karma config file set the following option:
coverageReporter: {
includeAllSources: true
}

How do I exclude files from unit test

Hi I am trying to exclude a file from the karma coverage report
I have looked through the web and people say the following line should work
in Karma.conf.js
preprocessors: {
'web/scripts/**/*.js': ['coverage'],
'app/scripts/exp/!(expfile|fun).js': ['coverage']
},
However, I still see them in my code coverage report.
I am not sure how to exclude them as my coverage percentage are greatly affected by these two files.
Thanks for the help!
Make sure that the directories - files you want to exclude are not loaded by any other include.

Angular test reporting options?

I find the Angular console test reporting awkward to read, it just a big pile of console text with next to no formatting.
Is it possible to get the Angular unit testing reporting to appear in the browser using html for formatting? I noticed this github repo the other day - https://github.com/larrymyers/jasmine-reporters
Is it possible to use the html reporter in that library for Angular unit test reporting..can I have the results of Angular unit tests shown in a browser?
I know there is a 'reporters' config option in the karma test runner file used for Angular testing and it has the following options -
dots,
progress,
junit,
growl,
coverage
However these seem to do absolutely nothing, no matter what I set them to, and I couldn't find any documentation on them.
So what is the purpose of the reporters option in karma.conf.js?
I personally use the coverage option. But for this to work you need to setup Istanbul ( https://github.com/yahoo/istanbul ) Coverage reporter separately. This will give you in HTML format the status of what files and lines in files are being tested, it will not show the actual tests written.
I don't think any of the reporters will actually print out the individual tests in HTML format. Try using Webstorm, it displays the individual tests in an easy to read format.
I've tried the karma-html-reporter module from npm, but it hasn't worked for me, so maybe see if they've updated that one.
I run karma from IntelliJ 13.x and am able to get a clean html format for the test output using the following configuration options in karma.conf.js in the config.set section :
reporters: ['progress', 'junit', 'html']
plugins : ['karma-htmlfile-reporter', ...] (karma-jasmine, etc...)
htmlReporter: { outputFile: 'tests/units.html' }
After my tests run I can just right click on the test/units.html and open in browser to see a formatted version of the results including color coding of results. Of course you will need to install any plugins or dependencies to get the test to run.
If you've been developing your project using the Angular-CLI, you can just run a
ng test --code-coverage
with the following (or similar) config in your karma.conf.js file
coverageIstanbulReporter: {
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true,
thresholds: {
global: { // thresholds for all files
statements: 0,
lines: 0,
branches: 0,
functions: 0
},
each: { // thresholds per file
statements: 0,
lines: 0,
branches: 0,
functions: 0
}
}
},
honestly, if not, the Karma Istanbul coverage tool is excellent and relatively simple to install.
For code coverage I use the newer version of karma-coverage-istanbul-reporter. It builds a report website based on the angular-cli code coverage output. You can drill down into your components and services to see where your unit test coverage is lacking. There is also an aggregation of coverage at the top. The output will create a coverage folder in your defined destination, just load the index.html for the report.
I wanted to note that by default this will include all files without .spec.ts. Use the following to exclude models and other files from coverage in your .angular-cli.json test section:
"codeCoverage" : {
"exclude": ["./src/test/*mocks.ts",
"./src/environments/*.ts",
"./src/app/models/*model.ts"
]
}

Resources