stView.el is undefined while testing Backbone view with jasmine - unit-testing

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