backbone.js - Backbone 和 Require 如何添加 Qunit

Question

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

在我的 ma​​in.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 初始化中我渲染主视图

  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 调用函数。我不能这样做，因为 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 View 不会自行渲染，而是由使用它的人负责。您会遇到 fetch() 等问题，所以幸运的是这也解决了这个问题。

目标:不要对渲染进行单元测试，直接跳过它!

你的 View 变成这样:

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 等)实际命中服务器，同时仍然允许您断言它们被调用。