Skip to content

Instantly share code, notes, and snippets.

@gabeno
Created February 12, 2014 05:41
Show Gist options
  • Save gabeno/8950573 to your computer and use it in GitHub Desktop.
Save gabeno/8950573 to your computer and use it in GitHub Desktop.
setting up jsdom in nodejs for headless testing
'use strict';
var expect = require('chai').expect;
var jsdom = require('jsdom');
var jquery = require('jquery'); // option 2
var TodoView = require('../hello-backbone/views/todo-view');
describe('Backbone.View', function() {
var $, todoView; // option 1
before(function(done) {
jsdom.env({
html: '<html><body></body></html>',
scripts: [jquery], // option 2
done: function(err, window) { // this means DOM is ready?!
// $ = require('jquery'); // option 1
//
todoView = new TodoView(); // => Error: jQuery requires a window with a document
done();
}
});
});
it('should be tied to a DOM element when created, based off the property provided', function() {
expect(todoView.el.tagName.toLowerCase()).to.equal('li');
});
// ... other tests here
});
@gabeno
Copy link
Author

gabeno commented Feb 12, 2014

Error is thrown when I try to use both options. I don't get it because the window object returned in the done callback has document. Any insights?

@gabeno
Copy link
Author

gabeno commented Feb 12, 2014

I have found the problem. Something that probably was escaping me was that jsdom creates a DOM instance (window and its friends). At this point, it needs to have the necessary scripts that you may need e.g. jquery. So I have to define $ within the DOM instance. Here is a solution that works:

before(function(done) {
  jsdom.env({
    html: '<html><body></body></html>',
    scripts: ['scripts/jquery-2.1.0.min.js'],
    done: function(err, window) {
      if (err) console.log(err);
      // console.log(window.jQuery); // referencing jQuery into the DOM instance
      var $ = window.jQuery;

      var Backbone = require('backbone');
      Backbone.$ = $;

      done();
    }
  });
});

and boom!

Backbone.View
✓ should be tied to a DOM element when created, based off the property provided 

The downside to this IMO is that I had to use a local copy in scripts directory in my test folder.

tests
| - scripts
    | - jquery-2.1.0.min.js

This is my setup because eventually I want to browserify my app.

@todo: Look for a way to reference from the jquery dist directory so that whenever I npm update jquery my test suite does not fall behind if I forget to copy the new distro in the scripts folder which is highly likely.

@renancarvalho
Copy link

Hey man, I'm facing the same problem.. can you provide just for testing you backbone view code ?
does it looks like this one?

var Backbone = require("Backbone");
Template = require("templatePath"),
$ = require("jquery");
Backbone.$ = $;

module.exports = Backbone.View.extend({

//view

});

@gabeno
Copy link
Author

gabeno commented Jun 23, 2015

@renancarvalho Did you manage to hack it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment