Empty list when testing with react-testing-library

Hi, first of all, congrats for your awesome library! I’ve been trying to test some components where I use it, but the list never gets rendered 😞

import * as React from 'react';
import { Virtuoso } from 'react-virtuoso';
import {  render } from '@testing-library/react';

function Component () {
     return (
         <Virtuoso
                totalCount={100}
                item={index => <div>{index}</div>}
          />
     );
}

describe('Test', () => {
   it('should render list of items', () => {
        const { debug } = render(<Component />);
        debug(); // Prints an empty list
   });
});

[tanato-cit]

The two provided solutions didn’t seemed great to me,

Setting the initialItemCount fixed in the code when not in SSR is quite dangerous, as it’ll basically render all elements thus removing the purpose of Virtualization and also can lead to multiple renders.

The second solution to override the initialItemCount on the component code that uses Virtuoso according to the environment that’s running (test vs production) doesn’t seem great either as the component code will be messy.

A better solution in my opinion is to override the Virtuoso implementation by creating a mocked version with a HOC that set this attribute, like this: (in this example I’m setting the initialItemCount to the same value as totalCount so it render all elements)

import { ElementType, Component as mockComponent } from 'react'

// ...

jest.mock('react-virtuoso', () => {
  const { Virtuoso } = jest.requireActual('react-virtuoso')

  const mockVirtuoso = (WrappedVirtuoso: ElementType) =>
    class extends mockComponent<{ totalCount: number }, unknown> {
      render() {
        return <WrappedVirtuoso initialItemCount={this.props?.totalCount} {...this.props} />
      }
    }
  return { Virtuoso: mockVirtuoso(Virtuoso) }
})

[petyosi]

Hi,

I am not familiar with the testing-library internals, but my guess is that it is executed in a node environment, bypassing the hooks, effects, etc. If this is so, you can probably make it work by setting the initialItemCount prop, available in v0.10 (released yesterday). Check the demo: https://stackblitz.com/edit/react-virtuoso-server-side-rendering?file=example.js It is also mentioned in the API reference: https://virtuoso.dev/virtuoso-api-reference/

Please let me know if this works for you since it is a new feature.