Virtual Scroll does not render items in tests

Question

While I have had no problems testing other primereact components the VirtualScroller never renders any items. The test below render the wrapper HTML, including a DIV with the class 'p-virtualscroller-content', but never the content.

The same code works fine in a browser.

Is this a bug in primereact or something I am overlooking on the test framework?

const cars = ["Ford"]

const itemTemplate = (item: any, options: any) => {
    return (<div>{item}</div>);
};

render(<VirtualScroller items={cars} itemTemplate={itemTemplate} style={{ width: '200px', height: '200px' }} />);

expect(await screen.findByText("Ford")).toBeInTheDocument();

Answer 1

Thanks a lot for your feedback, mocking getComputedStyle and offsetHeight/offsetWidth made my test to pass. Here is how I did it for those who are interested:

// Backup the original descriptor (if it exists)
const originalOffsetHeightDescriptor = Object.getOwnPropertyDescriptor(
  HTMLElement.prototype,
  'offsetHeight',
);

const originalOffsetWidthDescriptor = Object.getOwnPropertyDescriptor(
  HTMLElement.prototype,
  'offsetWidth',
);

let originalGetComputedStyle;

beforeAll(() => {
  // We mock getComputedStyle, offsetHeight and offsetWidth for the VirtualScroller used in dropdowns and treeSelects
  originalGetComputedStyle = window.getComputedStyle;
  window.getComputedStyle = jest.fn().mockImplementation(() => {
    return {
      paddingLeft: 0,
      paddingRight: 0,
      paddingTop: 0,
      paddingBottom: 0,
    };
  });

  // Mock offsetHeight for all div elements
  Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
    configurable: true,
    get: () => {
      return 500;
    },
  });
  // Mock offsetWidth for all div elements
  Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
    configurable: true,
    get: () => {
      return 500;
    },
  });
});

// After all tests are done, restore the original descriptor if it was defined
afterAll(() => {
  if (originalOffsetHeightDescriptor) {
    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', originalOffsetHeightDescriptor);
  } else if (originalOffsetWidthDescriptor) {
    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', originalOffsetWidthDescriptor);
  }

  window.getComputedStyle = originalGetComputedStyle;
});