使用 Sinon 存根 window.location.href

Question

我正在尝试测试一些客户端代码，为此我需要使用 Mocha/Sinon 存根 window.location.href 属性的值。

到目前为止我所尝试的 (using this example)：

describe('Logger', () => {
    it('should compose a Log', () => {
        var stub = sinon.stub(window.location, 'href', 'http://www.foo.com');
    });
});

跑步者显示如下错误：

TypeError：自定义存根应该是函数或属性描述符

将测试代码改为：

describe('Logger', () => {
    it('should compose a Log', () => {
        var stub = sinon.stub(window.location, 'href', {
            value: 'foo'
        });
    });
});

产生此错误：

TypeError: 试图将字符串属性 href 包装为函数

将函数作为第三个参数传递给sinon.stub 也不起作用。

有没有办法提供一个假的window.location.href 字符串，同时避免重定向（因为我在浏览器中测试）？

Answer 1

您需要使用global 在beforeEach 或it 中为您的测试模拟window 对象

例如

it('should compose a Log', () => {
   global.window = {
       location: {
           href: {
               value: 'foo'
           }
       }
   }
  //.... call the funciton 
});

Answer 2

存根不能替换属性，只能替换函数。

抛出的错误强化了这一点：

TypeError：自定义存根应该是函数或属性描述符

来自文档：

什么时候使用存根？

在需要时使用存根：

1. 通过测试控制方法的行为以强制代码沿特定路径运行。示例包括强制方法抛出错误以测试错误处理。

2. 当您想阻止直接调用特定方法时（可能是因为它触发了不希望的行为，例如 XMLHttpRequest 或类似的行为）。

http://sinonjs.org/releases/v2.0.0/stubs/

---

可能的解决方案

虽然许多内置对象可以被替换（用于测试），但有些则不能。对于这些属性，您可以创建外观对象，然后您必须在代码中使用它们并能够在测试中替换它们。

例如：

var loc = {

    setLocationHref: function(newHref) {
        window.location.href = newHref;
    },

    getLocationHref: function() {
        return window.location.href;
    }

};

用法：

loc.setLocationHref('http://acme.com');

然后你可以在你的测试中写

var stub = sinon.stub(loc, 'setLocationHref').returns('http://www.foo.com');

注意链接的returns() 调用。您的代码中还有另一个错误：第三个参数必须是一个函数，而不是另一个类型的值。这是一个回调，而不是属性应该返回的内容。

See the source code of stub()

Answer 3

使用window.location.assign(url) 而不是覆盖window.location 的值。然后你可以在window.location 对象上存根assign 方法。

http://www.w3schools.com/jsref/met_loc_assign.asp

---

更新：我在无头浏览器中对此进行了测试，但如果您在 Chrome 中运行测试，它可能无法正常工作。见@try-catch-finally's response。