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时）而不是{{1}调度的滚动事件}}

特别是，我试图测试一个滚动处理程序，我在这样的React类中设置：

window

为了测试componentDidMount: function () { window.addEventListener('scroll', this.onScroll); }, componentWillUnmount: function () { window.removeEventListener('scroll', this.onScroll); },，我终于发现我必须模拟从onScroll()调度滚动事件，如下所示：

window

这对我很有用。

Answer 2

从this和this判断，我相信TestUtils通过@Override protected void onPostExecute(Void ignore) { if (mCallbacks != null) { mCallbacks.onPostExecute(); //Whatever else you need to do }来模拟滚动，这意味着它需要一个WheelEvent参数来知道滚动的距离。这看起来像这样：

deltaY

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

2 个答案: