4

我正在尝试使用 Jasmine 和 Sion 编写单元测试，但是在使用 RequireJs 加载模块时我很难找到以下等效项：

sinon.stub(window, "MyItemView");

使用 RequireJs 时，我无法以这种方式存根，因为 MyItemView 未附加到窗口。

以下是我需要存根 MyItemView 的示例：

var MyView = Backbone.View.extend({
el: '#myElement',
initialize : function() {
    var that = this;
    this.collection.fetch({
        success : function() {
            that.render();
        }
    });
},

render : function() {
    this.collection.each(this.renderItem);
}

renderItem: function(model){
        var myItemView = new MyItemView({model: model});
        $('#myElement').append(myItemView.render().el);
    },

...

现在，使用 Jasmine 我可以测试 innerHtml 是否包含预期的 HTML：

it('View should contain correct Html', function(){
            var collectionFetchStub = sinon.stub(this.myCollection, 'fetch').yieldsTo('success', this.myCollection);
            this.view = new MyView({collection: this.myCollection});
            expect(this.view.el.innerHTML).toContain('<li><a href=""> 1 : test </a></li>');

            // Remove Stubs
            collectionFetchStub.restore();
        });

但是，此测试依赖于 MyItemView 的呈现，这对于单元测试来说并不理想。这个问题的最佳解决方案是什么？我是 javascript 的新手，对此的解决方案似乎很复杂。

4

1 回答 1

2

看看这个关于如何使用 requireJS 存根依赖项的 SO。有一些解决方案。像 testrJs、squireJs 或我自己的小解决方案。主要思想是用你的 spy/stub/mock 覆盖 requireJs 依赖，这样你就可以只测试模块。

因此，在您的情况下，您可以像这样对 MyItemView 存根：

var el = $("<div>test</div>")
var MyItemView = sinon.stub().returns({render: sinon.stub().returns(el)})

然后你必须将 MyItemView 存根注入你的 require 上下文中，你可以测试测试 div 是否附加到$('#myElement'). 这并不理想，因为所有 DOM 的东西，但它会工作。更好的方法是不要在主干视图之外渲染一些东西。因为然后您可以将模拟注入el视图并测试是否调用了模拟的附加方法。

于 2013-04-06T10:39:37.027 回答