javascript - 使用 Mocha、Karma 在 React 单元测试中测试 window.location.href

Question

我有一个简单的 react 组件，其中有一个 onClick 事件，该事件重定向到另一个页面 - Google 搜索引擎(用于测试目的)。

这是 React 组件的 JSFiddle 链接 - http://jsfiddle.net/t9dva2f7/

describe('Events', function () {
    it('should have click event state', function (done) {
        var events = Events();
        ReactTestUtils.renderIntoDocument(events);
        ReactTestUtils.Simulate.click(events.refs.button.getDOMNode());
        //Test to see if the page redirects to correct url?
        done();
    });
});

如何测试浏览器是否已重定向到正确的网址？我应该 mock window.location.href 吗？还是还有别的什么？

Answer 1

一种解决方案是使用 location.assign() 进行重定向，并在测试中仅模拟分配函数。让我们假设组件中有以下handleOnclick函数:

handleOnClick = () => {
  const redirectUrl = window.location.href.split('redirect=')[1] || null;
  if(redirectUrl) window.location.assign(redirectUrl);

将 testUrl 添加到您的 jest 配置中:

"jest": {
  testURL: "http://localhost",
}

在您的测试中，模拟分配函数并断言它是使用相应的 url 调用的。

编辑location.href:

window.history.pushState({}, 'Test Title', '/testurl.html?redirect=http://localhost/redirecturl.html');

window.location.assign = jest.fn();

#invoke the handleOnClick function and assert as follows

wrapper.instance().handleOnClick();
expect(window.location.assign)
 .toBeCalledWith('http://localhost/redirecturl.html');

我希望这会有所帮助。