如何在React测试库中对容器内的元素使用fireEvent.scroll事件？

Question

我试图模拟滚动一个包含在

中的元素，这个

是传递给render函数的一个参数。

我尝试着用类似下面的代码，但似乎

没有滚动，因此我的下一个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);

这是触发滚动事件的正确方式吗？还有其他替代方法吗？

- Eylen

---

你能成功滚动元素吗？ - AranS

我把这部分留下未完成，直到我有时间或者有人提出解决方案... - Eylen

Answer 1

你尝试给滚动容器添加EventListener了吗？我不确定你使用的是哪个库，但在正常情况下，如果没有监听器，调用scroll fireEvent将不会执行任何操作。在fireEvent之前，插入类似这样的内容：

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

并将您的fireEvent更改为：

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

- sdabrutas

---

@Eylen是监听器添加到容器本身还是添加到window上的监听器？如果是添加到window上，你可以使用fireEvent.scroll(window, { target: { scrollY: 100 } })或者fireEvent.scroll(global, { target: { scrollY: 100 } })。 - vernonk

scrollY和scrollX仅存在于window对象上，我使用scrollTop和scrollLeft使其与HTML元素一起工作。 - colinD

谢谢@colinD！我不知道对于HTML元素，我必须使用scrollLeft。 - Guillermo Garcia

Answer 2

scrollY描述整个文档的滚动位置。对于单个容器，请使用scrollLeft。

const scrollContainer = /* query */;
fireEvent.scroll(scrollContainer, { target: { scrollLeft: 500 } });

- Daniel Keele