javascript - React.addons.TestUtils.Simulate.scroll无法正常工作

我正在尝试使用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做错了吗？我怎样才能使它正常工作？

艾伦

最佳答案

我的情况可能与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 }));

那对我来说很棒。