javascript - 取消 jQuery 选择器调用？

Question

我正在努力更好地对我的 JavaScript 进行单元测试。我有以下代码:

var categoryVal = $('#category').val();
if (categoryVal === '') { 
    doSomething();
} 

我的测试运行程序在页面上没有 #category 输入，那么我如何在此处 stub /模拟 jQuery 选择器？我看过 jasmin和 sinon文档，但无法弄清楚如何让它们在这里工作，因为它们的 stub 对对象进行操作，而 $ 不是。

Answer 1

这里的问题是 $() 是一个使用 val() 方法返回对象的函数。因此，您必须 stub $() 以返回具有方法 val 的 stub 对象。

$ = sinon.stub();
$.withArgs('#category').returns(sinon.stub({val: function(){}}));

但是这里的主要错误是让你想要测试的代码调用函数 $() 来创建新实例。为什么？最佳实践是不在类中创建新实例，而是将它们传递到构造函数中。假设您有一个函数可以从输入中获取一个值，将其加倍，然后将其写回另一个:

function doubleIt(){
    $('#el2').val(('#el1').val() *2);
}

在本例中，您通过调用 $() 创建 2 个新对象。现在您必须 stub $() 以返回模拟和 stub 。使用下一个示例，您可以避免这种情况:

function doubleIt(el1, el2){
    el2.val(el1.val() *2);
}

虽然，在第一种情况下，您必须 stub $ 才能返回 stub ，但在第二种情况下，您可以轻松地将 stub 和 spy 传递到您的函数中。

因此第二个测试的 sinon 测试将如下所示:

var el1 =  sinon.stub({val: function(){}});
    el1.returns(2);

var el2 = sinon.spy({val: function(){}}, 'val')

doubleIt(el1, el2)

assert(el2.withArgs(4).calledOnce)

因此，由于这里没有 dom 元素，因此您可以简单地测试应用程序逻辑，而无需创建与应用程序中相同的 dom。