React.addons.TestUtils.Simulate.scroll不起作用

我試圖用ReactJS和JSDOM來模擬滾動事件。React.addons.TestUtils.Simulate.scroll不起作用

起初，我嘗試了以下內容：

var footer = TestUtils.findRenderedDOMComponentWithClass(Component, 'footer'); 
footer.scrollTop = 500; 
TestUtils.Simulate.scroll(footer.getDOMNode()); 
//I tried this as well, but no luck 
//TestUtils.Simulate.scroll(footer);

滾動事件不會傳遞。然後，我手動創建活動和一切工作得很好：

var evt = document.createEvent("HTMLEvents"); 
evt.initEvent("scroll", false, true); 
element.dispatchEvent(evt);

問題：我做得不對的TestUtils？我怎樣才能使它工作？

艾倫

來源

2015-05-08 Alan Souza

從this和this來看，我相信TestUtils模擬通過WheelEvent滾動，這意味着它需要一個deltaY參數知道多遠滾動。這將是這樣的：

TestUtils.Simulate.scroll(footer.getDOMNode(), { deltaY: 500 });

來源

2015-05-08 19:46:25 Jakemmarsh

這樣做的伎倆，謝謝@Jakemmarsh –

其實這是一個虛驚。它不起作用。該事件沒有得到傳播。 –

我的情況可能比OP的不同，但我是用了類似的問題在這裏很多很多搜索的掙扎後，發現我的方式。我意識到我的問題的關鍵是TestUtils.Simulate.scroll()只模擬由特定React組件調度的滾動事件（例如，當您在該組件上設置了overflow: scroll時）而不是由window調度的滾動事件。

特別是，我是想測試我會成立一個陣營類這樣的滾動處理程序：

componentDidMount: function() { 
    window.addEventListener('scroll', this.onScroll); 
}, 

componentWillUnmount: function() { 
    window.removeEventListener('scroll', this.onScroll); 
},

爲了測試onScroll()，我終於想通了，我不得不模擬調度滾動事件來自window，像這樣：

document.body.scrollTop = 100; 
window.dispatchEvent(new window.UIEvent('scroll', { detail: 0 }));

這對我很好。

來源

2016-01-24 02:52:36 robwhess

這很有幫助，謝謝！ –

React.addons.TestUtils.Simulate.scroll不起作用

回答

相關問題