'react-infinite-scroll-component with cypress
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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
