Testing require.js app with wallaby.js
JavaScript HTML
Latest commit 865b4b6 Mar 15, 2016 @ArtemGovorov ArtemGovorov Update test-main.js
Permalink
Failed to load latest commit information.
.idea/runConfigurations
lib initial commit Feb 20, 2015
src initial commit Feb 20, 2015
test Update test-main.js Mar 15, 2016
.gitignore
README.md
index.html
wallaby.js

README.md

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
wallaby.delayStart();

requirejs.config({
  baseUrl: '/src',

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

  shim: {
    'underscore': {
      exports: '_'
    }
  }
});

require(wallaby.tests, function () {
  wallaby.start();
});

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);
            app.render();

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

        it('works for underscore', function() {
            // just checking that _ works
            expect(_.size([1,2,3])).toEqual(3);
        });

    });

});

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