Javascript Coverage & Continuous Integration with Jenkins, QUnit and Grunt

QUnit and Grunt

QUnit is a powerful a javascript unit testing framework. Like other unit testing frameworks, it would be quite useful to measure code coverage of the JavaScript code using some modern code coverage tools.

Grunt is a javascript task runner. Like other build tools Rake, Ant, maven, phing, Grunt is a build tool for JavaScript tasks. In this short post, we will see how to setup continuous integration  for JavaScript code coverage using Grunt and other useful grunt plug-ins. I have forked source-code of  “Qunit-Demo-Advance” from GitHub. Source-Code for this demo is available on GitHub ” Modern-Toolkit” repo.

Grunt plug-ins used in this Demo are



Assuming you got awesome project using all cutting edge tools so you must using nodeJS and Grunt. In your ‘package.json’ file you have all node related dependencies. Im your ‘package.json’  add following Grunt plug-ins to generate javaScript code coverage and JUnit kind of reporting

Add following Devdependencies,

Note, we have got “grunt-qunit-junit” and “grunt-qunit-istanbul” to generate coverage and reports. Now, let’s install those dependencies.

This will install all our dependencies in the ‘node_modules’ directory.

Now that, we need to configure ‘Gruntfile.JS’ to generate code coverage and JUnit reports. Let’s add following tasks to our existing ‘Gruntfile.JS’

We have now configured “quint” task to generate HTML, and coburtura code coverage reports and “quint-junit” task to generate JUnit style reporting.

Now, Let’s run grunt to see it in action

This will create all sort of reports in the ‘report’ directory.


Now that, we have all xml reports in the ‘report’ directory and HTML reports in the ‘reports/coverage’ directory. In the next section, we will configure it with Jenkins Continuous Integration server.

Jenkins and JS Code Coverage

Setting CI Job

Let’s set up CI job to generate Code Coverage reports. We need to install few basic Jenkins plug-ins like ‘Cobertura‘ and HTML Publisher‘, ‘JUnit reports’ etc. Now  we will create a new job ‘Jenkins-Grunt’ pointing SCM as Git repo “Modern-Toolkit


Now, we will configure NPM PATH and all reports as follows


Let’s save this config and run a build. Once we ran the build we will get following Dashboard with all sort of reports:


Now, we got Code Coverage report, Cobertura report and HTML reports. Following those links, we will see

Cobertura Report


JS Coverage HTML Report


Video Demo

You can watch video demo on Youtube

Source – Code

Modern-Toolkit” GitHub


Grunt is awesome task runner for JavaScript and Generate JavaScript Code Coverage reports on CI using awesome Grunt plug-ins became so simple. Thanks to Jenkins and Grunt!