Test frameworks

Jason Strimpel edited this page Mar 29, 2014 · 28 revisions

A community maintained list of instructions on how to use RequireJS with different test frameworks.

Also check out amd-testing for working examples of testing AMD modules with busterjs, mocha, nodeunit, qunit, and jasmine.

Intern

Intern supports AMD modules by default.

Jasmine / travis-ci

Mocha

https://github.com/clubajax/mocha-bootstrap

JsTestDriver

Two things are required to test AMD modules using require.js with JsTestDriver.

  • JsTestDriver needs to be configured to serve the modules under test
  • RequireJS needs to be configured to use /test/ as baseUrl

Sample jsTestDriver.conf file:

server: http://localhost:9876

load:
  - src/lib/require.js
  - test/lib/require_config.js

test:
  - test/*.js

serve:
  - src/*.js

test/lib/require_config.js:

require.config({
  baseUrl: '/test/src'
});

Example test:

require(["HelloWorld"], function (HelloWorld) {

    TestCase("HelloWorldTest", {
        "test should return hello world!": function () {
            assertEquals("hello world!", HelloWorld());
        }
    });

});

There's a github repository with a working example here

JsTestDriver + Jasmine

Based on the previous example, it's also possible to use Jasmine BDD coupled with JsTestDriver

There is an alternative repository which uses named modules which makes it possible to run the Jasmine tests in an HTML page as well as with JsTestDriver.

QUnit

Despite QUnit having problems being loaded as an async module, you can get it to work by including it in a script tag before require.js, then turning off autostart, and then manually calling start() once your modules with tests are loaded. However, start needs to be called from inside a timer. Here's the full harness.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>QUnit Test Suite</title>
    <link rel="stylesheet" href="qunit-git.css">
    <script data-main="main" type="text/javascript" src="libs/require.js"></script>
    <script src="libs/qunit-git.js"></script>
    <script type="text/javascript">
        window.addEventListener("load", function onLoad() {
            QUnit.config.autostart = false;
                        // Without this setTimeout, the specs don't always get execute in webKit browsers

            setTimeout(function () {
                                //load tests using require
                require(['firstUse/example_test'], function (one) {
                    //now trigger them.
                    QUnit.start();
                });

            }, 10);
            window.removeEventListener("load", onLoad, true);
        }, true);
    </script>
</head>
<body>
    <div id="qunit">
    </div>
</body>
</html>

Use Qunit.stop() if you need to stop the tests, do some more async work then start them again with QUnit.start().

testr.js

Unit testing require.js modules, with both stubbed and script-loaded dependencies. Compatible with all test frameworks - Jasmine, QUnit, JsTestDriver, Buster JS, etc.

Modules requested via the testr method will be re-initialised, as will all dependencies of the test subject.

testr('path/to/module', stubs);
testr('path/to/module', useExternal);
testr('path/to/module', stubs, useExternal);

stubs: (optional) a collection of stubs to use in place of dependencies. Each key is the requirejs path name of the module to be stubbed; each value is the stub.

useExternal: (optional) a boolean to indicate if you wish to load in stubs from an external file.

Visit https://www.github.com/mattfysh/testr.js for real examples.

bunit.js

It just works.

Squire.js

Squire.js is a tool that allows you to mock your AMD modules dependencies for easier and more effective testing.

Features

  • Mock with anything! Sinon, other files, object literals, we don't care.
  • API you are used to, we are very close to the Require.js API. Only we add some dependency injection features.
  • Built on top of Require.js not around it.
  • Support for mocking multiple versions of a particular mock in a single file.
  • A magic dependency called mocks that provides a handle to loaded dependencies. Useful for stubbing with sinon.
  • Support for non-default Require.js contexts.
  • Used for testing real applications everyday.

Karma (previously testacular.js)

Test runner that captures browsers and runs them quietly in the background - connect whichever browsers you like. All reporting is in one place, PhantomJS is captured by default and has Jasmine and Mocha adapters. See http://karma-runner.github.io/0.8/plus/RequireJS.html

Buster JS

Buster currently supports testing async code using the run callback. They are also working on a buster-amd extension but I prefer using the run callback.

<link rel="stylesheet" href="../scripts/spec/buster-test.css"/>
<script type="text/javascript" src="../scripts/spec/buster-test.js"></script>
<script type="text/javascript" src="../scripts/lib/require.js"></script>

<script>
    var assert = buster.assert;
    buster.testCase("Buster specs", function(run){
        require.config({baseUrl:"/path/to/js"});
        require(["mymodule"],function(module) {

            run({
               setUp : function() {

               },
               "some test" : function(done) {
                  module.somethingAsync({herp:"derp"}, function(something) {
                       assert(something);
                       done();
                  }) 
                }
            });
        });
    });
</script>

grunt-castle

A unit-testing Grunt plugin for client, server, and client-server AMD code bases. The plugin eases the pain of unit testing AMD code bases by reducing specification boilerplate, auto-resolving of paths, and auto-wiring and configuring other open source libraries.