No rows returned by useVirtualizer in unit tests about virtual HOT 13 OPEN

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,
        }
    });

from virtual.

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,
})

from virtual.

@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.

from virtual.

@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?

from virtual.

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:

• "During the first render, the DOM nodes have not yet been created, so ref.current will be null." from the docs
• "Do not write or read ref.current during rendering." also from the docs

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.

from virtual.

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?

from virtual.

@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?

from virtual.

@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?

from virtual.

@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.

from virtual.

@saomartinho can you share the code problem here?

from virtual.

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.

from virtual.

@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.

from virtual.

@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.

from virtual.