Testing require.js app with wallaby.js
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Testing require.js code with wallaby.js

screen shot 2015-04-13 at 2 45 02 pm

To get Wallaby.js to run with require.js we need two files:

  • wallaby.js — which configures wallaby.js
  • test-main.js — which configures require.js for the tests

Let's say our app has a directory structure which looks something like this:

$ tree
|-- index.html
|-- wallaby.js
|-- lib
|   |-- jquery.js
|   |-- require.js
|   `-- underscore.js
|-- src
|   |-- app.js
|   `-- main.js
`-- test
    |-- appSpec.js
    `-- test-main.js

3 directories, 9 files

Configure wallaby.js

The first step is creating our wallaby.js.

module.exports = function () {
  return {
    files: [
      {pattern: 'lib/require.js', instrument: false},
      {pattern: 'lib/*.js', instrument: false, load: false},
      {pattern: 'src/app.js', load: false},
      {pattern: 'test/test-main.js', instrument: false}

    tests: [
      {pattern: 'test/appSpec.js', load: false}

Please notice that we need set load: false to all the files and tests except test/test-main.js, everything else is loaded by require.js.

In this example we'll use Jasmine (wallaby.js is using it by default), but other test frameworks works just as well.

Configuring require.js

Just like any require.js project, you need a main module to bootstrap your tests. We do this is test/test-main.js.

Require Each Test File

With wallaby.js we don't need to list all test files ourselves as we can easily find them from the files specified in test-main.js: wallaby includes all the files in window.wallaby.tests.

Now we can tell Require.js to load our tests, which must be done asynchronously as dependencies must be fetched before the tests are run. The test/test-main.js file ends up looking like this:

// delaying wallaby automatic start

  baseUrl: '/src',

  paths: {
    'jquery': '../lib/jquery',
    'underscore': '../lib/underscore'

  shim: {
    'underscore': {
      exports: '_'

require(wallaby.tests, function () {

Using Require.js in tests

Tests can now be written as regular Require.js modules. We wrap everything in define, and inside we can use the regular test methods, such as describe and it. Example:

define(['app', 'jquery', 'underscore'], function(App, $, _) {

    describe('just checking', function() {

        it('works for app', function() {
            var el = $('<div></div>');

            var app = new App(el);

            expect(el.text()).toEqual('require.js up and running');

        it('works for underscore', function() {
            // just checking that _ works



Based on Karma with require.js repository, with some wallaby specific changes.