6

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

4

2 回答 2

10

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

这对我很有用。

于 2016-01-24T02:52:36.743 回答
3

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

TestUtils.Simulate.scroll(footer.getDOMNode(), { deltaY: 500 });
于 2015-05-08T19:46:25.247 回答