如何使用 react-testing-library 在容器内的元素上触发 Event.scroll？

Posted 2023-02-19

【中文标题】如何使用 react-testing-library 在容器内的元素上触发 Event.scroll？

【英文标题】：How to fireEvent.scroll on a element inside container with react-testing-library?

【发布时间】：2019-03-10 22:38:50

【问题描述】：

我正在尝试模拟 div 中包含的元素的滚动，这是传递给 render 函数的元素。

我正在尝试这样的事情，但似乎 div 没有滚动，因为我的下一个 expect 正在下降。

const content = (
      <div style=display: 'flex'>
        <LazyList itemRenderer=itemRenderer items=items minItemHeight=MIN_ITEM_HEIGHT />
      </div>
    );
mockOffsetSize(WIDTH, HEIGHT);

const debug, container, queryByText = render(content);
const scrollContainer = container.querySelector('.ReactVirtualized__Grid');
debug(scrollContainer);
fireEvent.scroll(scrollContainer, y: 100);
debug(scrollContainer);

这是触发滚动事件的正确方法吗？还有其他选择吗？

【问题讨论】：

滚动元素有什么运气吗？

我没有完成这部分，直到我有时间或有人提出解决方案...

【参考方案1】：

您是否尝试将 EventListener 添加到滚动容器中？我只是不确定您可能刚刚使用的那个库，但我很确定，在正常情况下，在没有侦听器的情况下调用 scroll fireEvent 不会执行任何操作。在您的 fireEvent 之前，插入如下内容：

scrollContainer.addEventListener('scroll', () =>  /* some callback */ );

并将您的 fireEvent 更改为：

fireEvent.scroll(scrollContainer,  target:  scrollY: 100  );

【讨论】：

@Eylen 是添加到容器本身的监听器还是window 监听器？如果是这样，您可以fireEvent.scroll(window, target: scrollY: 100 ) 或fireEvent.scroll(global, target: scrollY: 100 )