Browser Unit Testing with Backbone, Mocha, Chai, and RequireJS

Now that I’ve been doing more node.js development, I decided to switch over to using RequireJS for browser javascript development for my latest Backbone project. Unfortunately since some modules support the CommonJS format and some don’t, it took me a little bit to figure out the best way to do things. I also couldn’t find anyone out there who had samples using version 2.0+ of RequireJS.

I’ve created a gist that has the files I used to get a basic test setup:

  • index.html - Just the basics to call require.js (which I call from the main application’s /libs/ folder, rather than keeping a separate copy in the tests folder). This then uses the data-main to call SpecRunner.js. In general I try to call all shared libraries from the application’s root, rather than copying to a test folder, so I don’t accidentally get library versions out of sync.
  • SpecRunner.js - This is the core to setting up tests. You need to reference all the libraries, including using the shim functionality of RequireJS to load Backbone and Underscore (you have to do this in your main app as well). Note that this is also setup to use the chai-jquery plugin, and I like to use the BDD Should assertions. Also interesting here is that mocha is called in the dependency list, but isn’t named in the function arguments. This is done purposely to put all mocha variables into scope - “mocha”, “describe”, “it”, etc.
  • app/models.js and model-tests.js - Just a simple unit test to prove all this works, testing that Backbone correctly assigns the urlRoot. Not necessarily a test you’d do in real life, but an easy hello world. Note that I’m using the node format here of calling dependencies, but the other way RequireJS allows where you pass in an array of dependencies works just fine as well.

Hope this helps!