Test Driven Development for JavaScript: jQuery and QUnit

Test Driven Development for JavaScript: jQuery and QUnit

JQuery, the popular open source, cross-browser JavaScript library, simplifies JavaScript programming by enabling developers to easily write code that incorporates event handling, animations and calls to Web services. The library supports browser independence, a simple event-handling model and extensibility through a plug-in API. Combining these features with a Test Driven Development (TDD) approach can greatly reduce bugs in your Web applications.

What is TDD, you ask? TDD is a style of programming in which you test drive your application code during development, i.e., you write your tests first and then your application’s source code. With properly planned code reviews, test-driven development can help in designing and implementing high-quality applications as well as in conforming to the stated requirements. As a result, TDD can reduce development time, code complexity, and post-deployment bugs.

In this article, I will explore how to use TDD with jQuery in Visual Studio. To get started, you should have the following installed in your system:

  • Visual Studio 2008
  • Visual Studio 2008 SP1
  • jQuery Library
  • Visual Studio 2008 jQuery Plug-in

You can also use Visual Studio 2010 — it comes with jQuery by default.

Test Driven Development Using jQuery

Test Driven Development is an Agile development technique that typically involves the following steps:

  1. Write the test
  2. Write the code for the test, i.e., the code that would make the test pass
  3. Run the test
  4. If the test fails, repeat, i.e., refactor the code and run the test again
  5. If the test passes, you can still refactor the code to make it clean and organized
  6. Make sure you re-run your tests every time the application’s code changes

Some popular JavaScript TDD frameworks include:

  • QUnit
  • JsUnit
  • JsSpec
  • YUI Test

In this article, I will use the QUnit TDD tool for demonstration. This tool is capable of testing any JavaScript code — even code written on the server side — making it great for testing JavaScript libraries and frameworks. Particularly useful for regression testing, QUnit opens up a lot of possibilities for unit testing your JavaScript code. In QUnit, you have the concept of Units and Modules. Units refer to units of testable code; they can be as simple as typical unit tests. Modules on the other hand are a mechanism to group the results of the tests, whether they succeeded or failed.

The following code snippet illustrates how you can use QUnit to unit test your JavaScript code:

// Unit testing using QUnitfunction isNumberEvenOrOdd(valueToTest) {     return (valueToTest % 2 === 0);}test('isNumberEvenOrOdd()', function() {     ok(!isNumberEvenOrOdd (1), 'One is an odd number');     ok(isNumberEvenOrOdd (2), 'Two is an even number');})

In the above code snippet, ok is an assertion. Other assertions include same, equals, and so on.

You can also use QUnit to run asynchronous tests, meaning tests for functions that are asynchronous. To write such test cases, you’ll need to use setTimeout as shown in the code snippet below:

asyncTest('This is an asynchronous test case', function() {     setTimeout(function() {          ok(true);          start();     }, 250)})

Review the QUnit API documentation for more information.


When writing unit tests for JavaScript, the major challenge is making them browser independent. Not all JavaScript TDD frameworks support all browsers. In this article I discussed the features of jQuery and how you can work with one JavaScript TDD framework, QUnit, to practice test driven development using jQuery. Happy coding!

Share the Post:
Heading photo, Metadata.

What is Metadata?

What is metadata? Well, It’s an odd concept to wrap your head around. Metadata is essentially the secondary layer of data that tracks details about the “regular” data. The regular

XDR solutions

The Benefits of Using XDR Solutions

Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved

AI is revolutionizing fraud detection

How AI is Revolutionizing Fraud Detection

Artificial intelligence – commonly known as AI – means a form of technology with multiple uses. As a result, it has become extremely valuable to a number of businesses across

AI innovation

Companies Leading AI Innovation in 2023

Artificial intelligence (AI) has been transforming industries and revolutionizing business operations. AI’s potential to enhance efficiency and productivity has become crucial to many businesses. As we move into 2023, several

data fivetran pricing

Fivetran Pricing Explained

One of the biggest trends of the 21st century is the massive surge in analytics. Analytics is the process of utilizing data to drive future decision-making. With so much of

kubernetes logging

Kubernetes Logging: What You Need to Know

Kubernetes from Google is one of the most popular open-source and free container management solutions made to make managing and deploying applications easier. It has a solid architecture that makes