How to fireEvent. Scroll on a Element Inside Container with React-Testing-Library?
I'm Trying to Simulate the Scrolling in a Element Contained in a Div, Which Is the One Passed to Render Function. I'm Trying with Something Like This, but It...
I'm trying to simulate the scrolling in a element contained in a div, which is the one passed to render function.
I'm trying with something like this, but it seems that the div is not scrolling as my next expect is falling.
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);
Is this the correct way of firing the scroll event? Any other alternatives?
1 Answer
Have you tried adding EventListener to your scroll container? I'm just not sure with that library you may have just used, but I'm pretty sure, in normal situations, calling scroll fireEvent without listener won't execute anything. Before your fireEvent, insert something like this:
scrollContainer.addEventListener('scroll', () => { /* some callback */ });
and change your fireEvent to:
fireEvent.scroll(scrollContainer, { target: { scrollY: 100 } });
Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
