Skip to content

@gabeno /jsdom-node
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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
Owner

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
Owner

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

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
Owner

@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
Something went wrong with that request. Please try again.