React.addons.TestUtils.Simulate.scroll not working

Question

I am trying to simulate a scroll event using ReactJS and JSDOM.

First I tried the following:

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); 

The scroll event does not propagate at all. Then I manually created the event, and everything worked fine:

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

Question : Am I doing something with TestUtils? How can I make this work?

Alan

Answer 1

My situation may differ from the OP, but I struggled with a similar problem and found my way here after repeated searches. I realized that the main problem is that TestUtils.Simulate.scroll() only mimics the scroll event dispatched by a specific React component (for example, when you have overflow: scroll installed on that component), and not the scroll event dispatched window .

In particular, I tried to check the scroll handler that was configured in the React class as follows:

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

To check onScroll() , I finally realized that I had to simulate sending a scroll event from window , for example:

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

This worked great for me.

Answer 2

Judging by this and this , I believe that TestUtils simulates scrolling through a WheelEvent , which means it needs the deltaY parameter to know how far to scroll. It will look like this:

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