React: React.addons.TestUtils.Simulate.scroll is not working with JSDOM

[alansouzati]

Hi, I'm trying to test the scroll event and I could not make the scroll event propagation to happen using TestUtils:

React.addons.TestUtils.Simulate.scroll(contentDiv, { deltaY: 500 });

The above code is never triggering the scroll function callback.
Then if I change the implementation to be something like this it works:

contentDiv.scrollTop = 500;

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

Am I doing something wrong with the React TestUtils?
I've created a stackoverflow ticket for this.

[barsukov]

Guys any activity on that issue? Currently has a trouble to test my own infinite scroll component.

[havenchyk]

offtop

@barsukov if you find the way to do it without real DOM or without mocking document.addEventListener please, share in SO or here

[barsukov]

I tried to do it with enzyme mounting and simulating events. It is not working :( .

The approach above is one of the most popular and common to do it.

Another example, this is the test of infinite scroll in react-infinite lib looks like:
https://github.com/seatgeek/react-infinite/blob/master/__tests__/infinite_test.js#L213-L226

For my opinion it is a bit inconvenient and not very perfect way. But probably wil bel helpful for somebody.

[gaearon]

If there was any activity you would see it on the issue 😉 .
With an issue like this, the best way to fix it is to dive into why it happens and send a PR to the project.

[nmccready]

The problem is more jsdom then react. https://github.com/tmpvar/jsdom/issues/1422

[gaearon]

See the explanation in https://stackoverflow.com/a/34971686/458193.

TestUtils.Simulate simulates a React event. It won’t fire any event listeners you added with the addEventListener() browser API.