Unit Testing JavaScript
with QUnit and Sinon

A Portal-themed parody of a British WWII propaganda poster: 'Keep Calm and Continue Testing'

Matthew Turland

(Use arrows to navigate between slides.)

There will be slides

Publications section of my web site at matthewturland.com

Publications section of http://matthewturland.com

I co/wrote these


Got tests?

Darth Vader from Star Wars with the caption, 'I find your lack of tests disturbing.'

Enough said


What do unit tests do?

Picard standing in front of the brig containing Riker in the ST:TNG episode 'The Pegasus'

What can unit tests verify?

River Tam gazing up at a screen before whispering 'Miranda' in the film Serenity

What is not a unit test?

Any test where the results can be impacted by...

The Doctor in the TARDIS from Doctor Who

QUnit defined

QUnit is a powerful, easy-to-use JavaScript unit testing framework. It's used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code, including itself!
QUnit was originally developed by John Resig as part of jQuery... At the time it still depended on jQuery. A rewrite in 2009 fixed that, and now QUnit runs completely standalone.
~ http://qunitjs.com

QUnit basic demo

Demo (lifted from Cookbook)

Test organization

Demo (see also: Cookbook and API documentation)

Black-and-white screenshot of the game Tetris

Equality assertions

Demo (see also: Intro to Unit Testing and API documentation)

Miscellanous assertions


xkcd: Labyrinth

Real world example

Demo (lifted from Intro to Unit Testing)

Injection for time-based tests


Injection for DOM-based tests

Parameterize plugin


Johnny Five from the film Short Circuit

Data provider plugin



Standalone test spies, stubs and mocks for JavaScript.
No dependencies, works with any unit testing framework.
~ http://sinonjs.org

The Procession of the Trojan Horse in Troy by Giovanni Domenico Tiepolo



A test spy is a function that records arguments, return value, the value of this and exception thrown (if any) for all its calls... Test spies are useful to test both callbacks and how certain functions/methods are used throughout the system under test.
~ Sinon.JS - Documentation

Spy Vs Spy



Test stubs are functions (spies) with pre-programmed behavior. They support the full test spy API in addition to methods which can be used to alter the stub's behavior... When wrapping an existing function with a stub, the original function is not called.
~ Sinon.JS - Documentation

Crash Dummies figures

Testing Synchronous Callbacks


Fake timers is a synchronous implementation of setTimeout and friends that ... can overwrite the global functions ... to allow you to more easily test code using them. Fake timers provide a clock object to pass time, which can also be used to control Date objects ...
~ Sinon.JS - Documentation

The TARDIS from Doctor Who

Testing Asynchronous Callbacks


Provides a fake implementation of XMLHttpRequest and provides several interfaces for manipulating objects created by it. Helps with testing requests made with XHR.
~ Sinon.JS - Documentation

Doc in the blackboard scene from Back to the Future

Code Coverage

Donkey from the Shrek cartoon film franchise

Best Practices

Grumpy Programmer Chris Hartjes declaring, 'WRITE TESTS OR I WILL CUT YOU'


Please rate my talk!


Check out joind.in mobile apps!


QR code with a link to give feedback on joind.in

That's All, Folks