Learn to Test Your JavaScript Using QUnit

QUnit was originally used for unit testing jQuery, jQuery UI and other jQuery libraries but now it has been transformed into a unit testing framework for all JavaScript codes. Read on to learn more.

QUnit was originally used for unit testing jQuery, jQuery UI and other jQuery libraries but now it has been transformed into a nice unit testing framework for all JavaScript codes. As the web developers started using raw JavaScript or other JavaScript frameworks to improve the responsiveness of the web applications they develop, it becomes inevitable to write unit test cases for the JavaScript source code.

In this article I will be introducing you to the QUnit framework and provide insights about using it to test the JavaScript code.

Kick Start with QUnit

All the features of QUnit are compiled into a single framework library qunit.js and it can be downloaded from here. There is also a QUnit.css file, which is required to be downloaded and used for styling the QUnit results page.

To start writing QUnit test cases four components are required and they are the following.

1. QUnit kit (QUnit.js & QUnit.css)

2. Test runner page

3. JavaScript file to add the unit test cases.

4. JavaScript file containing the source to be tested.

In the above items the Test runner is a web page (.html) which will act as a platform for the execution of the QUnit test cases. The test runner page should include the references for items 1, 3 & 4 along with two div tags (qunit & qunit-fixture). Following is the sample code for the test runner pager.

Assertions

As available in NUnit and JUnit, QUnit framework also comes with many assert statements; following are a few of them.

1. ok() – It is a Boolean assertion statement.

2. equal() – Performs a non-strict comparison.

3. strictEqual() – Performs a strict comparison(strong typing).

4. throws() – Asserts for an exception thrown.

5. deepEqual() – Compares the value of the object properties and primitive types.

6. nonDeepEqual() – Inverse of deepEqual()

A Simple Unit Test Sample

In this section let us create a basic unit test case using QUnit. Create a test runner page named QUnitDemo and add the references to the QUnit files, test cases JavaScript and the source code JavaScript. In the source code file add the following simple method, which returns the summation of two numbers.

Now in the test cases add the following QUnit test case as given below. Here the thing to note is that the function test is considered to be a test case and the name provided as the first parameter to the test function becomes the name for the test case.

Now browse the test runner HTML page. The test is executed and the result is displayed on the web page as shown in Fig 1.0.

Fig 1.0 - QUnit Demo

QUnit allows you to organize the test cases by using a module. Say for example if there is another test case to be written for the subtract functionality, then below is how it can be organized using a Module.

All the test cases following a module definition will be associated to it. Also in the module you can provide the setup and teardown functions as available in NUnit. Now run the test cases and Fig 1.1 shows the test results. Note that the test cases are prefixed by the module names to which they are associated.

Fig 1.1 - Test Results

Unit Testing the DOM Operations

QUnit allows developers to write the unit test cases for testing DOM operations. To demonstrate this I will modify my test case to put the values to a DIV element instead of returning it as shown below.

Till now we have seen the QUnit test cases for synchronous function calls but what about the asynchronous operations? The answer QUnit provides is that it can be achieved through the asyncTest() method.

I hope this article helps as a jump start for the developers to use QUnit. I will leave the rest for the readers to explore. Happy reading!

Advertiser Disclosure:
Some of the products that appear on this site are from companies from which QuinStreet receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. QuinStreet does not include all companies or all types of products available in the marketplace.