Testing InfiniteScroll component from react-infinite-scroller

Viewed 854

I'm using react-infinite-scroller to make several calls to a paginated endpoint.

I haven't found any way to test the function that is triggered when a new request has to be done to the server. I've taken a look at the github repository, but there is no information about how to trigger the function loadMore from a test.

The actual code looks like this:

<PaginatedList
  data-testid="paginated-list-testid"
>
 <InfiniteScroll
     pageStart={0}
     loadMore={this._nextPage}
     hasMore={hasMore}
     loader={<div key={0}>Loading...</div>}
     useWindow={false}
 >
  {this._renderElements()}
 </InfiniteScroll>
</PaginatedList>

The _nextPage function looks like follow:

async _nextPage() {
        const { hasMore} = this.state;
        const { externalCondition } = this.props;
        if (hasMore) {
            const response = externalCondition ? await this.repositoryA.next() : await this.repositoryB.next();
            const nextElements = response.elements;
            this.setState({
                elements: nextElements,
                loading: false,
                hasMore: response.hasNext,
            });
        }
    }

I wanna test that given an externalCondition the function this.repositoryA.next() is called. However, my test does not even reach this method.

This is my test:

test('Should\'ve called the repositoryA.next()', async () => {
    const sampleUserId = 1;
    const paginatedListTestId = "paginated-list-testid";
    const renderComponent = render(
        <PaginatedList
            userId={sampleUserId}
        />,
    );
    const { getByTestId } = renderComponent;
    fireEvent.scroll(getByTestId(paginatedListTestId), { target: { scrollY: 9000 } });
});

I know that my test does not have an assert yet, but I was debugging and I wasn't able to reach my function. Neither scrolling to 9000 nor -9000. Any help is welcome. (The code has been a little bit changed due to privacy, so please, obviate any typo or mismatching variable names)

0 Answers
Related