搞清楚如何模拟窗口大小变化的反应组件测试

所以基本上当组件挂载时，我有一个事件监听器侦听调整大小事件。它切换isMobileView状态，然后将其作为道具传递给子节点。所以这是必要的，这是有效的，并经过测试。我相当新的测试，我试图找出一种方式，我可以编写一个测试，调整窗口的大小，使所有的逻辑发生，并测试它执行它应该如何。搞清楚如何模拟窗口大小变化的反应组件测试

这里是代码 -

componentDidMount() { 
    this.setMobileViewState() 
    window.addEventListener('resize', this.setMobileViewState.bind(this)); 
} 

setMobileViewState() { 
    if(document.documentElement.clientWidth <= this.props.mobileMenuShowWidth) { 
     this.setState({ isMobileView: true }) 
    } else { 
     this.setState({ isMobileView: false }) 
    } 
}

我知道代码工作，但我想编写一个测试吧。基本上只是确保状态正确更改的东西。

来源

2017-08-24 joe

我可以告诉你如何在摩卡测试此/ sinon如果这对你来说是值得的。 –

@BenHare这将是完美的，我想要一个介绍sinon所以这将是一个很好的时间让我学习它我猜。如果我看到有效的代码，它会帮助我很多。不知道是否可以从其他例子中找出它 – joe

道歉我认为我可以得到它的工作，但我不知道如何根据文档stub document.documentElement –

使用Jest和酵素您可以执行以下操作。。开玩笑已JSDOM烤在你的测试开玩笑提供window对象，它是由global代表（我认为，开玩笑设置的默认window.innerWidth为1,024像素）：

test('Test something when the viewport changes.',() => { 

    // Mount the component to test. 
    const component = mount(<ComponentToTest/>); 

    ... 

    // Change the viewport to 500px. 
    global.innerWidth = 500; 

    // Trigger the window resize event. 
    global.dispatchEvent(new Event('resize')); 

    ... 

    // Run your assertion. 
});

来源

2017-09-16 17:08:52 JoeTidee

在https://developer.mozilla.org/en -US/docs/Web/API/Window/innerWidth，innerWidth是只读的。我们应该使用window.resizeBy（x，y）;代替？ – Simon

搞清楚如何模拟窗口大小变化的反应组件测试

回答

相关问题