搞清楚如何模擬窗口大小變化的反應組件測試

所以基本上當組件掛載時，我有一個事件監聽器偵聽調整大小事件。它切換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

搞清楚如何模擬窗口大小變化的反應組件測試

回答

相關問題