No rows returned by useVirtualizer in unit tests
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 7.1k
- Forks
- 466
- Avg merge
- 2d 31m
- Merged PRs (30d)
- 13
Description
Describe the bug
In browser table rows are rendered as expected. In unit tests useVirtualizer returns an empty array from rowVirtualizer.getVirtualItems(). The bug is introduce with changes introduced by v3.0.0-beta.63. It also exists in the latest release v3.0.1
I think it was introduced by #598 here
Your minimal, reproducible example
below
Steps to reproduce
This unit test will pass for v3.0.0-beta.62 and fail for any version there after.
import { useVirtualizer } from "@tanstack/react-virtual";
import { render, screen } from "@testing-library/react";
import { styled } from "@mui/material";
import { useCallback, useRef } from "react";
const items = [
{ id: 1, name: "foo" },
{ id: 2, name: "bar" },
];
const Parent = styled("div")({ height: "100%", width: "100%", overflow: "auto" });
const Inner = styled("div")({ width: "100%", position: "relative" });
const Row = styled("div")({ position: "absolute", top: 0, left: 0, width: "100%" });
function VirtualTableComponent() {
const parentRef = useRef<HTMLDivElement>(null);
const rowVirtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => parentRef.current,
estimateSize: useCallback(() => 56, []),
});
return (
<Parent ref={parentRef}>
<Inner sx={{ height: `${rowVirtualizer.getTotalSize()}px` }}> {/* set at 112px as expected */}
{rowVirtualizer.getVirtualItems().map((virtualRow) => ( // always an empty array
<Row
key={virtualRow.index}
data-index={virtualRow.index}
ref={rowVirtualizer.measureElement}
style={{ transform: `translateY(${virtualRow.start}px)` }}
>
<div>{items[virtualRow.index].name}</div>
</Row>
))}
</Inner>
</Parent>
);
}
describe("@tanstack/react-virtual", () => {
it("renders rows", () => {
render(<VirtualTableComponent />);
expect(screen.getByText(items[0].name)).toBeInTheDocument();
expect(screen.getByText(items[1].name)).toBeInTheDocument();
});
});
Expected behavior
As a user I expect the provided unit test to pass but it fails.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
macOS
tanstack-virtual version
v3.0.1
TypeScript version
v4.9.5
Additional context
I've console.log'd out the value of rowVirtualizer.getTotalSize() and it is given 112 as expected
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the provided React unit test and comparing behavior between v3.0.0-beta.62 and v3.0.1. Inspect the useVirtualizer path and the changes referenced in pull request #598; done means getVirtualItems() contains the expected rows and the test renders both names.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, testing-qa
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100