如何在单元测试中使用 Sinon 更改属性值？答案

【问题标题】：How can I change property value with Sinon in unit test?如何在单元测试中使用 Sinon 更改属性值？
【发布时间】：2017-10-29 23:08:43
【问题描述】：

我有这个代码：

AlertHelper = function () {
    return {
        DisplayToastMessage: function() {
            if ($("body > .modal.small").length > 1) {
                AlertHelper.CalculateAdditionalHeight();
            }
        }
    }
}();

我尝试使用 QUnit 和 SinonJS 编写单元测试。

这是单元测试：

QUnit.test('DisplayToastMessage - testing function call', function (assert) {
    var sandbox = sinon.sandbox.create();
    var mock = sinon.mock(AlertHelper);

    sandbox.stub($("body > .modal.small"), "length", 42);

    var expectationCalculateAdditionalHeight = mock.expects("CalculateAdditionalHeight");
    expectationCalculateAdditionalHeight.once();

    AlertHelper.DisplayToastMessage();

    mock.verify();
    assert.ok(mock.verify(), "CalculateAdditionalHeight function is called once");

    sandbox.restore();
    mock.restore();
});

但我收到错误“无法读取未定义的属性‘长度’”。如何测试调用了CalculateAdditionalHeight 函数？

【问题讨论】：

标签： jquery unit-testing sinon qunit

【解决方案1】：

尝试模拟实例：

$ = sinon.stub(); $.withArgs('body > .modal.small').returns({"length": 42});

【讨论】：

我想我需要在最后添加 $.restore();我说的对吗？
它有效，但我需要恢复价值。你知道如何恢复存根吗？
是的，您可以使用 $.restore();请参阅sinonjs.org/releases/v2.3.2/stubs 的文档。此外，您可以使用 beforeEach/before 来设置您对每个测试用例的期望。
我添加了 $.restore();。出现错误“$.restore 不是函数”。你知道为什么吗？
我发现覆盖$后，没有办法恢复，因为没有创建引用。

【解决方案2】：

经过研究，我找到了解决方案：

QUnit.test('DisplayToastMessage - testing function call', function (assert) {
    var mock = sinon.mock(AlertHelper);
    var fake$ = sinon.stub(window, '$');

    fake$.withArgs('body > .modal.small').returns({ "length": 42 });

    var expectationCalculateAdditionalHeight = mock.expects("CalculateAdditionalHeight");
    expectationCalculateAdditionalHeight.once();

    AlertHelper.DisplayToastMessage();

    mock.verify();
    assert.ok(mock.verify(), "CalculateAdditionalHeight function is called once");

    fake$.restore();
    mock.restore();
});

【讨论】：