T
TanStack•2y ago
stormy-gold

RTL unit tests with tanstack virtual

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>
<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 !
3 Replies
stormy-gold
stormy-goldOP•2y ago
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..
ambitious-aqua
ambitious-aqua•2y ago
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.
eastern-cyan
eastern-cyan•5mo ago
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. For anyone else having that issue, the problem was we had a manual ResizeObserver mock in our jest.setup.ts. Using the resize-observer-polyfill npm package fixed the issue.

Did you find this page helpful?