Last Updated: September 09, 2019
·
39.88K
· afeld

JavaScript test framework comparison

A friend was recently deciding on a test framework for client-side JavaScript, and asked for advice on which to use. There are many to choose from, and it's tough to decide, since they all do basically the same thing:

  1. Describe what you're testing
  2. Set up what you're going to test
  3. Assert whether the thing did what you expect

The differentiating factors are really in the details. I have used a few of the most popular JS test frameworks (Jasmine, Mocha, and QUnit) across different projects, though there are many more. Here is how they compare.

Differences

Includes the latest version, at time of writing.

Jasmine (v2.0.1)

Jasmine seems to be the most popular of the three (based on discussions with other programmers, and from number of stars on the repository). It also has runners in Python and Ruby, which is incredibly useful if you want to run your client-side tests alongside your server-side ones.

I was going to write a gripe about Jasmine's asynchronous testing syntax, but it looks like it has been changed in 2.0, and now is very close to that of QUnit and Mocha. Hooray!

Mocha (v1.20.1)

Mocha doesn't have an assertion library built in, so it requires an additional 3rd-party library to be added. While I appreciate the flexibility, this adds some unnecessary friction for first-time users, who need to pick one without a lot of context about why one would be a better choice than the other. (The answer is that "it makes zero difference – it's just a matter of picking the syntax you like".) One awesome (more advanced) thing about Mocha is that it has built-in support for Promises.

QUnit (v1.14.0)

QUnit is the easiest of the three to set up – it only requires a JS file, a CSS file, and a single DOM element:

<div id="qunit"></div>

My first issue with QUnit is that, in an effort to reduce the number of global functions created, QUnit is more verbose than the others, using methods like QUnit.test() instead of simply it(). One other complaint is how it handles grouping of tests. QUnit provides a module() method:

QUnit.module('parent thing - child1');
// test child1

QUnit.module('parent thing - child2');
// test child 2

whereas Jasmine and Mocha both have (the same) syntax for nesting test blocks:

describe('parent thing', function(){
  describe('child1', function(){
    // test child1
  });

  describe('child2', function(){
    // test child2
  });
});

While sometimes more verbose, I like that the nestable describe() functions make the grouping clearer.

Update: @yozlet pointed out that qunit-bdd adds the nestable describe() behavior to QUnit.

Similarities

  • All can be run in a browser page
    • Note: Debugging JS in a browser is a lot easier than debugging in a command-line, so having that option is very nice
  • All can be run from command-line, via Node.js/PhantomJS
  • Most things

In conclusion, don't stress a ton about picking – people's testing framework of choice is mostly arbitrary. Just focus on the much harder problem of writing good tests :-)

See also

5 Responses
Add your response

This is great! Really helpful!!

over 1 year ago ·

Awesome roundup. Really helpful!

over 1 year ago ·

Thank you

over 1 year ago ·

Might want to add Testium https://github.com/groupon-testium/testium :)

over 1 year ago ·

just3ws: Seems to be a runner for Mocha, so the info above would apply.

over 1 year ago ·