Open densk1 opened 8 months ago
@densk1 that is correct behaviour, it's because in unit test elements don't have height or width. One option is to mock the getBoundingClientRect for the scroller element to return some height.
Ah ok, thanks! So it won't matter if set height on parent CSS because getBoundingClientRect won't return it anyway?
Is there a challenge with mocking getBoundingClientRect that it needs to be mocked for both the parent, inner and rows themselves?
@densk1 that is correct behaviour, it's because in unit test elements don't have height or width. One option is to mock the getBoundingClientRect for the scroller element to return some height.
I'm facing the same issue rowVirtualizer.getVirtualItems()
is always empty. Is there any example how to write unit tests for this?
Same issue here using 3.0.1
. The proposed solution One option is to mock the getBoundingClientRect for the scroller element to return some height.
worked on my test suite.
Element.prototype.getBoundingClientRect = jest.fn(() => {
return {
width: 120,
height: 120,
top: 0,
left: 0,
bottom: 0,
right: 0,
}
});
@luchiago When I tried this, it changed the sizes of all HTML elements (both the container and the option elements), so my test list only rendered 2 options (presumably a visible one and the option below it) even though I passed more options to it. Is this how your tests are written or do you have a workaround for this?
@zroux93 In my case, the whole test file was failing for the same reason, the same as you. The tests passed when I put a beforeEach
with this workaround. But before it started failing, I only expected an array with two virtual rows. That may be why it worked for me.
@luchiago, can you put a example? Because a follow your suggestion, and put beforeEach
, but still return 0 virtual rows.
Oki, found it my issue is in the logic file, where I use the renderHook
function from testing-library. Do you know what to do here?
@saomartinho can you share the code problem here?
I think the issue here is that we should have unit tests in the examples.
Documentation should contain at least how to mock getBoundingClientRect in jest with JS and TypeScript to test with TanStack/virtual. I've wasted a day trying to figure out why my mock data was not working in a unit test, if you are refactoring someone else's code and you update react-virtual you will encounter this issue.
Do we have some other way to do this, like mocking some function inside the library ?
I've checked
jest.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(() => ({
width: 120,
height: 120,
top: 0,
left: 0,
bottom: 0,
right: 0,
x: 0,
y: 0,
// eslint-disable-next-line @typescript-eslint/no-empty-function
toJSON: () => {}
}));
and
Object.defineProperty(Element.prototype, 'getBoundingClientRect', {
configurable: true,
value: jest.fn(() => {
return {
width: 120,
height: 120,
top: 0,
left: 0,
bottom: 0,
right: 0,
x: 0,
y: 0,
toJSON: () => {},
};
}),
});
both solutions allow the tests to render the items in a virtualised table.
@istvandesign it's a similar approach to what I did, but you did it with more options. I agree it's missing a documentation on how to mock, but I believe it should be an issue to investigate.
@istvandesign it's a similar approach to what I did, but you did it with more options. I agree it's missing a documentation on how to mock, but I believe it should be an issue to investigate.
That's because I am using TypeScript.
Documentation should contain at least how to mock getBoundingClientRect in jest with JS and TypeScript to test with TanStack/virtual.
Yes i agree, we should include it. Nevertheless mocking Element.prototype is enough, for more complex scenarios we can even return different values, for example like here if we add aria-label
on scroller div of virtualizer
const getDOMRect = (width: number, height: number) => ({
width,
height,
top: 0,
left: 0,
bottom: 0,
right: 0,
x: 0,
y: 0,
toJSON: () => {},
})
beforeEach(() => {
Element.prototype.getBoundingClientRect = jest.fn(function () {
if (this.getAttribute('aria-label') === 'Virtual list') {
return getDOMRect(500, 500)
}
return getDOMRect(0, 0)
})
})
Do we have some other way to do this, like mocking some function inside the library ?
Other option would be to create context provider that would pass your own observeElementRect for test, something like
const VirtualizerObserveElementRect = React.createContext<
((instance: Virtualizer<any, any>, cb: (rect: { width: number; height: number }) => void) => void) | undefined
>(undefined)
// in test wrap with provider
const Mock = ({ children }: { children: React.ReactNode }) => {
return (
<VirtualizerObserveElementRect.Provider
value={(_, cb) => {
cb({ height: 200, width: 200 })
}}
>
{children}
</VirtualizerObserveElementRect.Provider>
)
}
// and in component
const observeElementRect = React.useContext(VirtualizerObserveElementRect)
const virtualizer = useVirtualizer({
count: 1000,
observeElementRect,
estimateSize: () => 25,
getScrollElement: () => null,
})
i am facing the same problem but not in simulated test environment:
it seems to me that if getScrollElement returns null, then getVirtualItems returns an empty array. and it seems that getScrollElement is called during initial render and if you've chosen to return a ref object's current value (which is expected to point to DOM element) then you are not doing React correctly because:
coming up with a workaround to this should be trivial, however using a ref object to refer to a DOM node does seem like to most natural approach in getScrollElement.
Describe the bug
In browser table rows are rendered as expected. In unit tests
useVirtualizer
returns an empty array fromrowVirtualizer.getVirtualItems()
. The bug is introduce with changes introduced byv3.0.0-beta.63
. It also exists in the latest releasev3.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.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 ofrowVirtualizer.getTotalSize()
and it is given112
as expectedTerms & Code of Conduct