Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 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?

like image 688
Eylen Avatar asked Oct 05 '18 12:10

Eylen


People also ask

How can you simulate clicking on an element using react testing utilities?

Simulate a Click Event The onClick should pass through to the component's underlying <button /> element because we're spreading ( {... props} ) that props through to it. In the test, we create a ref so that we can pass it to the rendered Button and later to the Simulate. click call.

What does fireEvent click do?

Consider fireEvent. click , which creates a click event and dispatches that event on the given DOM node.

What does fireEvent change do?

Using fireEvent. change() on a select element fires the event handler, but doesn't update state.


1 Answers

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 } }); 
like image 172
sdabrutas Avatar answered Sep 18 '22 13:09

sdabrutas