RTL unit tests with tanstack virtual | TanStack | Page 1

terse oriole Nov 15, 2023, 2:53 PM

#

Hey Guys ! 👋

I am facing one strange issue, when implementing the tanstack virtual. const items = virtualizer.getVirtualItems(); the items is empty and not rendering any items, because of which unit test is failing.

On console, I found the DOM structure like this:

<div
  style="height: 90px; width: 100%; position: relative;"
>
  <ul
    class="css-17yo06k"
    role="list"
    style="position: absolute; top: 0px; left: 0px; width: 100%; transform: translateY(0px);"
  /> // <==== empty ul
</div>

I am using version 3.0.0-beta.68

I tried to applied waitFor as well in order to wait if list re render, but no luck. has anyone faced this issue ? Could you please help me understand how to resolve it ? Thanks !

terse oriole Nov 20, 2023, 10:51 AM

#

So at last I ended up mocking the hook using jest and things are working fine. but I guess it should have worked without mocking as well..

brave nova Nov 20, 2023, 2:08 PM

#

The issue here is that in jsdom scroller element is 0, one option is to mock the getBoundingClientRect and return some meaningful for this element.

unborn breach Apr 4, 2025, 11:12 PM

#

Mocking getBoundingClientRect fixed the issue for me with getVirtualItems returning an empty list, but now I'm getting this error: [TypeError: Cannot read properties of undefined (reading 'getAttribute')] Has anyone ever experienced this? I'm using @tanstack/react-virtual 3.13.6 with React 18.

#RTL unit tests with tanstack virtual