Running your QUnit Tests in Teamcity with Node.js

This article is relevant for: 
- phantomjs-options 1.0.0
- QUnit 1.15.0
it may or may not work for other versions.


In one of my JavaScript library projects I wrote my Unit Tests using QUnit. I have my library in a Node.js wrapper so I run my unit tests programatically using "require".

To do this, I use the node package called"node-qunit-phantomjs".

After this I have a node script that looks like this:

var qunit = require('node-qunit-phantomjs');

qunit('./tests/index.html', {
    'verbose': true,
    'phantomjs-options': ['--web-security=no']
});

and I just run it using node which then runs the Qunit Tests using PhantomJS in a "headless" mode and then reports in the terminal if my tests pass or fail.

I prefer to write all my JavaScript workflow features like tests, documentation, minification etc as standalone node scripts so I can run them programatically in a build system (as I aim for automation and Continuous Integration in my projects)

Now the issue comes when I use Teamcity to run my node QUnit script, as Teamcity cannot read the terminal output put out by "node-qunit-phantomjs" it does not show a Build Step Fail (if there are any QUnit Test Fails), it just runs the node script and if that runs without any node runtime issues it notifies us of a Build Step Pass always.

To get Teamcity to work with QUnit we need to write a basic "hook" to work with QUnit test callbacks and write some console.log() comments that Teamcity can "understand".

So to get Teamcity to understand the actual results of your QUnit tests, do the following:

1) Create a new JavaScript file called "qunit-teamcity-log.js" (you can name it anything)

2) Insert this code in that file:

//QUnit.moduleStart({ name })
QUnit.moduleStart(function(settings){
    console.log("##teamcity[testSuiteStarted name='" + settings.name + "']");
});

//QUnit.moduleDone({ name, failed, passed, total })
QUnit.moduleDone(function(settings){
    console.log("##teamcity[testSuiteFinished name='" + settings.name + "']");
});

//QUnit.testStart({ name })
QUnit.testStart(function (settings){
    console.log("##teamcity[testStarted name='" + settings.name + "']");
});

//QUnit.testDone({ name, failed, passed, total })
QUnit.testDone(function(settings){
    if(settings.failed > 0){
        console.log("##teamcity[testFailed name='" + settings.name + "'" + 
            " message='Assertions failed: " + settings.failed + "'" +
                " details='Assertions failed: " + settings.failed + "']");
    }
    console.log("##teamcity[testFinished name='" + settings.name + "']");
});

3) Now, in your QUnit tests index.html, include this "qunit-teamcity-log.js" file after your QUnit javascript file like so:

4) Now when you run your QUnit index.html page in the browser, if you look at the console you will see something like this:

5) Now, when your test runs in Teamcity, it will read these comments and show an accurate view of what happened in your tests. e.g:

Hopefully this is useful to you...