Backbone和要求如何添加Qunit

Question

我正在使用Backbone和Require.js.一切都很好,但我想在我的应用程序中添加一些单元测试.我决定使用Qunit.js.

在我的main.js文件中,我创建了新对象EventsView:

require.config({
  paths: {
    jquery:                 'libs/jquery',
    underscore:             'libs/underscore',
    backbone:               'libs/backbone',
    qunit:                  'test/libs/qunit-1.10.0
    }
 });
 require(['view/eventsView', 
          'test/eventsView_test', 
          'test/eventView_test' ], function(EventsView){
           var events = new EventsView; //here I create first object my View
 });

在eventsView.js中, initialize我渲染主视图

  define(['jquery',
          'backbone',
          'underscore',
          'collection/eventC',
          'model/eventM',
          'view/eventView'], function($, Backbone,_,EventC,EventM, EventView,){

 var EventsView = Backbone.View.extend({
    el: $(".contener"),     
    initialize: function(){
        this.render();
     },
     ....//other functions
    });
     return EventsView;
 });

所以现在我需要在其他文件eventsView_test.js中调用此视图中的函数.我不能这样做,因为View将再次呈现:

  define(['jquery','qunit','view/eventsView'], function($,qunit,EventsView){
    //var eventsView = new EventsView(); // I can't create object here 

    test( "first_test_func", function() {
        var result = eventsView.first_test_func(2,2);
        equal( result, 4, "2 square equals 4" );
    });

我该怎么办？我需要某种单身或其他东西吗？

Answer 1

这是一个很棒的问题，也是我经常看到的一个问题。

实际上，我通过创建我所谓的“引导”范例来解决这个问题，但你可以随意称呼它。关键是 Backbone 视图不会自行渲染，而是由使用它的人负责。您会遇到 fetch() 等问题，所以幸运的是这也解决了这个问题。

目标：不要对渲染进行单元测试，而是一起跳过它！

你的观点变成这样：

require(function () {
    var view = Backbone.View.extend({
        // initialize is executed on new, just as you found
        initialize: function (options) {
            _.bindAll(this);

            // Create models, initialize properties, and bind to events here.
            // Basically only do __UNEXPENSIVE__, non-dom-changing things that
            // you don't care get executed a lot.                

            this.someCollection = new Backbone.Collection();
            this.someCollection.on('add', this.onSomeCollectionAdd);
        },

        // bootstrap is for server-side operations that you don't want executed
        // by every single test.
        bootstrap: function () {
            this.someCollection.fetch().done(this.render);
        },

        render: function () {
            this.$el.html(...);
        },

        first_test_func: function () {

        }
    });

    return view;
});

如何在您的应用程序中使用它：

require(['viewpath'], function (myView) {
    var instance = new myView({ el: $('#something') });
    instance.bootstrap(); //triggers fetch, or if no fetch needed, just render
});

现在可以放心进行单元测试了。

define(['jquery','qunit','view/eventsView'], function($,qunit,EventsView){

    test( "first_test_func", function() {
        // Now this line won't call the server, or render.
        // You can isolate/test what you want.
        var eventsView = new EventsView();
        var result = eventsView.first_test_func(2,2);
        equal( result, 4, "2 square equals 4" );
    });
});

使用SinonJS

我强烈推荐查看SinonJS。这对于单元测试 JavaScript 来说是令人惊奇的，特别是 Backbone 实现，因为它具有强大的模拟功能，可以用来防止渲染和服务器调用（ 、fetch等save）实际命中服务器，同时仍然允许您断言它们被调用。