React-window: Testing

[kserjey]

I have implemented infinite scroll with your libraries (react-window, react-window-infinite-loader) according to guides and it works fine, but there is a problem with testing. When I tried to test my component I ran into problem that there is nothing inside FixedSizeList. I haven't found anything about testing in the docs. Is it a bug or I missed something?

Here is codesandbox

[effectivetom]

I'm having the same issue. At first I thought it was because I wasn't mocking AutoSizer correctly, but I've verified that it's receiving correct width and height props in my tests, and FixedSizeList is still empty. My implementation is pretty barebones.

[OriAmir]

Same problem here with VariableSizeGrid, the container is empty on tests I don't know why.
When I use AutoSIzer of the original react-virtualized library(https://github.com/bvaughn/react-virtualized) it's work.
I think that this library: https://www.npmjs.com/package/react-virtualized-auto-sizer is not updated, the last update was before 2 years and it's a big warning.

Maybe we should use the original react-virtualized library if it's so ...

@bvaughn
ANY Ideas?

[haithemT]

did you try to mock autoSizer
jest.mock('react-virtualized-auto-sizer', () => ({ children }: any) => children({ height: 600, width: 600 }));

[OriAmir]

but why I need to mock that? I try to understand whats the different between the "original" AutoSizer to the one that exists in separate library ?

[haithemT]

there is a condition to prevent children from rendering if width or height are 0
https://github.com/bvaughn/react-virtualized-auto-sizer/blob/ffcba2dd39b89111ed4b42d64431f35ce7c1c23a/src/index.js#L123

since we are using jest-dom for testing the calculation will never happen and height and width will be always 0.

in the original AutoSizer this condition doesn't exist so the children will always render.

[OriAmir]

@haithemT get you, thanks for that!
I just mock that as you say and it works.
I just think if it's correct to use a library that not get updated 2 years ( the auto-sizer) and also the react-window library not updated already for a while

What do you think?

[haithemT]

honestly i'm using this library from it first release and till now i didn't encounter any blocking issues, i tried some other new libraries but none of them was performant like this one.