I try to test fetching data on scroll in infinity-loading component. I am using react-infinite-scroll-component and cypress.

Component:

<div
    data-testid="chat-messages"
    className="..."
>
    <InfiniteScroll
        dataLength={MessagesComponents.length}
        next={loadMore}
        className="..."
        inverse
        hasMore={!isReachedEnd}
        loader={<Loader />}
        scrollableTarget="list-of-messages"
    >
        {MessagesComponents}
    </InfiniteScroll>
</div>

My test:

    cy.intercept(...).as('loadingMore');

    // Scroll to top
    cy.get('[data-testid="chat-messages"]')
        .children()
        .first()
        .children()
        .first()
        .scrollTo('top');

    cy.wait('@loadingMore').then(() => {...});

Problem (in cypress console):

Timed out retrying after 4000ms: cy.scrollTo() failed because this element is not scrollable:

<div class="infinite-scroll-component" style="height: auto; overflow: auto;">...</div>

Please for help.

Scroll library: link