Jest.js 如何使用react-testing-library在容器内的元素上fireEvent.scroll?

dldeef67  于 2023-09-28  发布在  Jest
关注(0)|答案(2)|浏览(207)

我试图模拟一个div中包含的元素的滚动,这个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);

这是触发scroll事件的正确方法吗?还有其他选择吗?

ve7v8dk2

ve7v8dk21#

你有没有试过在你的滚动容器中添加EventBox?我只是不确定你可能刚刚使用的那个库,但我很确定,在正常情况下,调用没有侦听器的scroll fireEvent不会执行任何操作。在fireEvent之前,插入如下内容:

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

并将fireEvent更改为:

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

a1o7rhls2#

scrollY描述整个文档的滚动位置。使用scrollLeft表示单个容器。

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

相关问题