Modern Web Best Practice: Testing

Tyson Cadenhead covers unit tests and whether you should choose QUnit or Mocha for your next project.


Testing your JavaScript code is becoming increasingly important. Modern web applications are often complex, which means that there is more opportunity for errors to creep in. Luckily, we have unit tests, which are a great way to mitigate the risks and discover errors in the code proactively.

What is Unit Testing?

Unit testing is a programming practice that involves writing tests against modular units of code. Unit tests typically take the form of an assertion. For example, when a method is fired with certain arguments, we would expect it to return certain results. We can write a test to determine whether the results we are expecting are returned. If our expectations are met, the test will pass. If our expectations are not met, the test will fail.

QUnit and Mocha

While there are numerous testing frameworks available, we are going to focus on Mocha and QUnit. Both frameworks are well documented, mature and easy to use. We will be looking at the pros and cons of each.


QUnit is an open-source testing framework. It was originally created by John Resig as a way to test the jQuery library, but it is equally capable of testing any JavaScript code.

Time Tested

QUnit has been around for several years. As the test runner for jQuery, jQueryUI and jQuery Mobile along with countless web applications, it has a proven track record as a reliable library.

Simple Coding

Writing tests in QUnit is very straightforward. Here is an example of the syntax:

QUnit.test("hello test", function(assert) {
  assert.ok(1 == "1", "Passed!");

In The Browser

QUnit is designed to run in the browser. There are ways to run it in a headless browser from the terminal, but it is not built to run directly in Node.

Comes With Its Own Assertion Library

With QUnit, you can write assertions against the QUnit API by accessing the assert object that is passed into each test. Since QUnit comes with its own assertion library, there is no need for another dependency to write assertions with.


Mocha is a testing framework that can run in the browser or in Node. While QUnit has been available for public use since 2008, Mocha is the new kid on the block. The first major release of Mocha was in 2012.

Runs In Node

If you are automating your tests, running them in NodeJS can be a big win. Mocha doesn’t even need to boot up a headless browser to run your tests, it can just execute them in Node. If you have your DOM interaction separate from your application logic, this approach will work great. It might become a little hairier if you are testing things that require access to the DOM or the document object. Did I mention that it also runs in the browser?

Intuitive API

Writing Mocha tests is so simple and beautiful that it can be compared to writing poetry. The method names are descriptive of what they are doing, which makes Mocha tests easy to read. Here is an example of what a Mocha test might look like:

describe("My Unit To Test", function () {
  describe("#myMethod()", function () {
    it("should return the thing I expect", function () {
      assert.equal(1, "1", "Passed!");

Chose Your Own Assertion Library

Mocha doesn’t come with its own assertion library, but there are plenty of great libraries out there such as chai or even the “assert” object that ships natively with NodeJS.

Asynchronous Testing

This is one area where Mocha definitely wins. Writing asynchronous tests for timeouts and ajax calls couldn’t be easier.

QUnit or Mocha?

The choice between QUnit and Mocha really depends on your specific application. If your application is small and all of your tests are on the client-side, QUnit is a solid choice. For bigger projects, the speed of your test runs can really become an issue. In that situation, or if you are testing NodeJS code, Mocha is a really ideal candidate. In our projects at appendTo, we typically use Mocha as our test runner. Either way, if you are writing unit tests, you really can’t go wrong.


AngularJS: One Step at a Time

How-To: Make Animated Progress Circles Using Circliful