When using react-viewport-list, children not being rendered in test.

[nikithb]

I'm using Jest and React Testing Library. Windowing works fine in browser, but list items are not being rendered in tests. Test was able to find only one item of whole list, all other items were not being rendered.

How can I mock this ViewPortList, so that whole list gets rendered at once?.

[oleggrishechkin]

Hi, @nikithb

react-viewport-list uses requestAnimationFrame - you can wait for it before expect.

If waiting not working:

I don't know how Jest mock window and DOM itself. getBoundingClientRect should work for correct virtualisation. So, you can try to mock this method. Also this library uses scrollTop and clientHeight (for vertical lists). Maybe you need to mock viewportRef element sizes and each item sizes.

If mocking DOM not working:

You can mock ViewportList itself to something like this:

const Mock = ({ items, children }) => (
  <>items.map(children)<>
);

[nikithb]

The mock function works. Thank you.

[oleggrishechkin]

It's just work.

But maybe we can use better solutions with virtualization by mocking sizes of viewportRef and items.

@nikithb This is a better mock with forwardRef, scrollToIndex and spacers:

import {
    useImperativeHandle,
    forwardRef,
} from 'react';

const ViewportListMock = forwardRef((
    { items = [], children },
    ref,
) => {
    useImperativeHandle(
        ref,
        () => ({
            scrollToIndex: () => {},
        }),
        [],
    );

    return (
        <>
            <div />
            {items.map(children)}
            <div />
        </>
    );
});