Since I use QUnit on a daily basis, here are some tips that might prove helpful in your daily test cycle.

Limit execution time of asyncTests

One common pitfall when writing asyncTests is that they tend to hang when the operation does not call its callback. This can be resolved through timeouts, as this pattern shows:

// specify the count of asserts that need to run
asyncTest("foo", 1, function() {
    // limit the test execution time to 10s
    var timeout = setTimeout(start, 10000);

    performAsyncOperation(function onDone(status) {
         // suppress the test timeout

Temporarily suppress test teardown

When debugging tests related to the DOM, it is useful to see how a test ended, which is hindered by a proper teardown that brings the test suite to a clean slate. A simple and efficient way of checking the end state of a test is to call the stop method:

test("bar", function() {
    $("<div class='bar' />").appendTo("#qunit-fixture")
        .css("color", "red");

    // temporarily turn the test into an asynchronous one
    // this will hang the suite, but will allow inspection

Maintaining a big suite of tests: Composite suites

One of the rarely advertised features is the official composite plug-in. It solves the problem that big suites have -- it is not practical to keep a few thousand tests in a single web page. What the composite plug-in does is that it enables you to split your tests into different files, each of which tests different parts of the code. For example, one page that tests the API of a component, and one separate page for its rendering:

composite test suite

This way you know exactly where the tests for a given API method or for some specific functionality are, which saves time -- searching within 500 tests will still be tedious, not to mention navigation.

Know thy framework

I am often surprised how many people do unit tests but are not aware of the features of the underlying framework. The official QUnit cookbook is a 15 minute read, and can save you hours of reinventing the wheel.

Now go red-green that shiny new feature, or that pesky old bug!

Become a better front-end developer!

Get updates on new posts that will help your work.

Back to Overview