Our tests are broken when using a virtualizer since a few versions

[Ex4l]

Hello everyone, we are using tanstack table and the tanstack virtualizer with my team inside react in our vitest project for a while now and we had some tests that were working flawlessly on version 3.0.0-beta.60 and prior.

With the release of the 3.0.1 I wanted to update the packages to that release and everything is working fine in our code, but our tests are now failing because the virtualized list seems not to load.

Here is a small example of a failing test I wrote as I can't show you our actual code:

VirtualList.tsx:

import { useVirtualizer } from "@tanstack/react-virtual";
import { useCallback, useMemo, useRef } from "react";

const VirtualList = ({ onClickItem }) => {
  const items = useMemo(
    () =>
      new Array(10000)
        .fill(true)
        .map((...[, i]) => i),
    []
  );

  const ref = useRef(null);

  const { getVirtualItems, getTotalSize } = useVirtualizer({
    estimateSize: useCallback(() => 30, []),
    getScrollElement: () => ref.current,
    overscan: 5,
    count: items.length,
  });

  return <div
    ref={ref}
    className="List"
    data-testid="List"
    style={{
      height: `200px`,
      width: `400px`,
      overflow: "auto",
    }}
  >
    <ul
      style={{
        height: `${getTotalSize()}px`,
        width: "100%",
        position: "relative",
      }}
    >
      {getVirtualItems().map((item) => (
        <li
          key={item.index}
          data-value={item.index}
          className={item.index % 2 ? "ListItemOdd" : "ListItemEven"}
          onClick={() => onClickItem(item.index)}
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: `${item.size}px`,
            transform: `translateY(${item.start}px)`,
          }}
        >
          Value {item.index}
        </li>
      ))}
    </ul>
  </div>
};

export default VirtualList;

test.spec.tsx:

describe('Virtualizer', () => {
  it("Called onClick in virtual list", async () => {
    const mockClick = vitest.fn();

    render(<VirtualList onClickItem={mockClick} />);

    fireEvent.scroll(screen.getByTestId("List"), { target: { scrollTop: 20 * 30 } });

    await waitFor(() => expect(screen.queryByText("21")).toBeInTheDocument());

    userEvent.click(screen.getByText("21"));

    expect(mockClick).toHaveBeenCalledTimes(1);
    expect(mockClick).toHaveBeenCalledWith(21);
  });
});

You'll see that vitest will fail on the line await waitFor(() => expect(screen.queryByText("21")).toBeInTheDocument()); because the virtualized list is not loading.

I'm not sure if it's a bug or there is something we forgot to have a good testing environment for the virtualizer ?

Thanks.

[piecyk]

Hi, the issue is that we changed how the virtualizer behaves when scrolling element has no size, as in test jsdom will return 0 that's why no items are returned. Checkout the PR #598 for more details and reason behind this change.

@Ex4l for unit test you can mock the getBoundingClientRect for the scroller element.

[Ex4l]

Hello Damian, thank you for your quick and clear answer, I'll check the PR #598 and test to mock getBoundingClientRect function as soon as I can.

Edit: Just edited our tests with a mock of getBoundingClientRect and everything is working flawlessly.

Thank you again.