stView.el is undefined while testing Backbone view with jasmine

Question

I'm using Jasmine for unit testing to test an application with Backbone.js (and it's the first time that I'm working with them both so I'm a little bit stuck :/ ) Here is my Backbone view

define(['jquery','backbone','underscore','handelbars','models/story','text!templates/story.html',
		'controllers/storyController'], 
function($, Backbone, _,handelbars, story,storyTemplate,ctrl){
	var View = Backbone.View.extend({
		el: '#main',
		events:{
			'click .close-story' : 'closeStory',
		}
        // Some functions
	});
	return View;
});

and the spec of Jasmine

define(['views/storyView'],function (storyView) {
  describe("Testing the Story View ",function () {
    var stView;
    beforeEach(function(){
      stView=new storyView({id:1});
      stView.render();
    })
    it("Test if el is defined and trigger the click ",function () {
      expect(stView.el).toBeDefined(); 
    })
  })
})

Thank you :)

Answer 1

You have hardcode el: '#main' in the view constructor. This will evaluate when the AMD module is loaded. And when you run jasmine unit tests, I don't think this element of your application is available in Jasmine test page, unless you have mocked it somehow. You can test this via putting a break point on the constructor and inspecting the DOM.

For the existing code to work, you should attach a dummy element on whatever DOM jasmine is using to run your tests before loading the module containing view definition.

On the other hand, It's better to remove the hardcoded el: '#main' (You can tell the developer that it's a very bad coding practice) and pass the element reference while creating view instance, so you can do

new storyView({id:1, el : $('<div/>'}); // dummy element for test