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

Question

我正在尝试使用ReactJS和JSDOM模拟滚动事件.

最初我尝试了以下内容:

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做错了什么？我怎样才能让它发挥作用？

艾伦

Answer 1

我的情况可能与OP有所不同,但我正在努力解决类似的问题,并经过大量的搜索后找到了我的方式.我意识到我的问题的关键在于TestUtils.Simulate.scroll()只模拟由特定React组件调度的滚动事件(例如,当您overflow: scroll在该组件上设置时)而不是由调度的调度滚动事件window.

特别是,我试图测试一个我在React类中设置的滚动处理程序,如下所示:

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

这对我很有用.

Answer 2

从this和this来看，我相信 TestUtils 通过 a 模拟滚动WheelEvent，这意味着它需要一个deltaY参数来知道滚动多远。那看起来像这样：

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