public
Last active

Browser Unit Testing with Backbone Mocha Chai and RequireJS

  • Download Gist
SpecRunner.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
require.config({
baseUrl: '/backbone-tests/',
paths: {
'jquery' : '/app/libs/jquery',
'underscore' : '/app/libs/underscore',
'backbone' : '/app/libs/backbone',
'mocha' : 'libs/mocha',
'chai' : 'libs/chai',
'chai-jquery' : 'libs/chai-jquery',
'models' : '/app/models'
},
shim: {
'underscore': {
exports: '_'
},
'jquery': {
exports: '$'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'chai-jquery': ['jquery', 'chai']
},
urlArgs: 'bust=' + (new Date()).getTime()
});
 
require(['require', 'chai', 'chai-jquery', 'mocha', 'jquery'], function(require, chai, chaiJquery){
 
// Chai
var should = chai.should();
chai.use(chaiJquery);
 
/*globals mocha */
mocha.setup('bdd');
 
require([
'specs/model-test.js',
], function(require) {
mocha.run();
});
 
});
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11
<html>
<head>
<meta charset="utf-8"/>
<title>Backbone Tests</title>
<link rel="stylesheet" href="libs/mocha.css"/>
</head>
<body>
<div id="mocha"></div>
<script data-main="SpecRunner.js" src="/app/libs/require.js"></script>
</body>
</html>
model-tests.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
define(function(require) {
var models = require('models');
 
describe('Models', function() {
 
describe('Sample Model', function() {
it('should default "urlRoot" property to "/api/samples"', function() {
var sample = new models.Sample();
sample.urlRoot.should.equal('/api/samples');
});
});
 
});
 
});
models.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12
define(function(require) {
var Backbone = require('backbone');
 
var models = {};
 
models.Sample = Backbone.Model.extend({
urlRoot: '/api/samples'
});
 
return models;
 
});

Thanks for this! are there any differences for using 'expect' over 'should' in chai? or is it down to personal preference?

Thanks for sharing. I'm using a similar structure which works fine inside the browser but it fails when using mocha-phantomjs (http://stackoverflow.com/questions/15657458/mocha-init-timeout-with-mocha-phantomjs). Did you ever test your solution with mocha-phantomjs? (https://github.com/metaskills/mocha-phantomjs)

Thanks for this gist, very useful.

I had to add a line after setup, to let mocha continue run tests after first fail.

  mocha.setup('bdd');
  mocha.bail(false);

@craigrich : Check out this page for the differences between expect & should. http://chaijs.com/guide/styles/

+1 for this gist. Awesome!

Thanks for sharing. I have searched for hours for such a clear example. Found lots. This one really helped.

@AlexZeitler To run with mocha-phantomjs:

change:

    mocha.run();

to

    if (window.mochaPhantomJS) {
      mochaPhantomJS.run();
    }
    else {
      mocha.run();
    }

in SpecRunner.js

to use with expect i had to add th following line to SpecRunner.js

expect = chai.expect;  // note no 'var'

near

var should = chai.should();

(actually, I replaced that line.

@rwestgeest, thanks so much! I was searching for a solution to @AlexZeitler's same problem for a couple hours.

Thank you, very useful gist.
Is it possible to run this tests with mocha command in terminal without phantomjs?

Very useful, thanks a lot

Thanks for this great gist!

I also had to add shims for mocha and chai to get this to work via grunt test:

shim: {
    ...,
    mocha: {
         exports: 'mocha'
    },
    chai: {
         exports: 'chai'
    }
},

Thanks @rwestgeest got tripped by same issue head banging for a little while there..

Coolness, thank you.

Would someone be kind enough to explain how var should = chai.should() works when using RequireJS like in this example? Using "var" will scope "should" to within that single require function, therefore making it not available in the test fixtures. When I follow the example, it does not make "should" available in my test fixtures. Instead, i have to use the alias Should(), and I have to assign it to the window object like this: window.Should = chai.Should()
How are all of you able to get "should" to work in your tests without doing what i just described?
When i do this then, in my tests, i have to use Should, instead of should...
Here's a little explanation of why you have to do this, if you're making "should" global: https://github.com/chaijs/chai/issues/86
and if you're NOT making it global, then how is it available in your tests?

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.