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.
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
}
I've installed karma. I've created a karma.conf.js file and pointed to my source files. In my source files is included a version of require.js.
Everything seems fine (it launches the node server, and Webstorm CLI connects to it properly) except it barfs when loading backbone style files that begin with define(... In my output I get
Uncaught ReferenceError: define is not defined
at http://localhost:9876/base/src/main/app/App.js?f2880b74f1e96a210ff36e8394daa946c9d11294:1
When I jump to code, the line indicated is just define( at the top of a backbone js file.
I've tried explicitly including require in my lib directory (which should have already been included from the wildcard)
Do I need some boilerplate somewhere to not muddle (possibly conflicting) require.js's? I tried ignoring require... but the result was the same.
exclude: [
'**/*.scss',
'**/*.css',
'**/Gruntfile.js',
'**/docs/*.js',
'**/main/resources/js/lib/crypto-js-3.1.2/*.js',
'**/main/resources/js/lib/require-2.1.2.min.js' // same error when ignored
],
Only mildly related: I'm running karma from webstorm.
I believe you have to include 'requirejs' in your frameworks. Make sure you include the requirejs string before others, ie:
frameworks: ['requirejs','jasmine']
I have the correct versions of Compass and Sass installed on my machine and have had no issues creating sourcemaps with other projects, i.e my base set-up works.
My problem is very specific: it's with the 'yo-angular' grunt install.
I have amended the Gruntfile.js as follows (by adding the sourcemap: true flag) :
// Compiles Sass to CSS and generates necessary files if requested
compass: {
options: {
sourcemap: true,
sassDir: '<%= yeoman.app %>/styles',
And i have changed the debug flag to false:
},
server: {
options: {
debugInfo: false
}
}
},
This works fine, throws no errors in 'grunt serve', and on inspecting the generated main.css file the references generated by the sourcemap main.css are entirely accurate.
But, oddly, the elements panel of Chrome Dev Tools refers to completely different line numbers.
The way that yo angular process builds is presumably the issue, and I notice that the files/folder structure (e.g. the _sass files are all empty) that the host is looking at are different to my dev files so maybe it's just impossible to map to them?
Quick PS: I know that many have struggled to get sass sourcemaps working at all, because of issues with Compass and so on, but just to reiterate I am not asking for help in getting a basic set-up established - I have managed that. The specific problem that I have is making the 'yo angular' stack to work with sourcemaps. I imagine that others have had the same problem. I have searched all over this and other sites to no avail and posted issues on github without a result.
Please Help and thanks in anticipation!
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"
]
}