T
TanStack•2y ago
ratty-blush

[Solved] No rows rendered via testing-library/react

mantine-react-table 2.0.0-alpha.11
├── @tanstack/match-sorter-utils 8.11.3
├── @tanstack/react-table 8.11.6
├── @tanstack/react-virtual 3.0.2
└── react-dom 18.2.0 peer
@tanstack/react-query 5.17.12
msw 1.3.2
mantine-react-table 2.0.0-alpha.11
├── @tanstack/match-sorter-utils 8.11.3
├── @tanstack/react-table 8.11.6
├── @tanstack/react-virtual 3.0.2
└── react-dom 18.2.0 peer
@tanstack/react-query 5.17.12
msw 1.3.2
I'm trying to write tests for my component that renders a table via useMantineReactTable (wrapper around react table that renders Mantine components). The component itself works, the data from the query gets piped into the component and everything works fine on the actual page but when I render in my tests I don't see any rows getting populated in the table. - I've verified that the MSW handler is being called. - I've verified the data is being passed to useMantineReactTable. - I've verified a row shows up when the same data is returned from my react-query hook in the actual page. - I'm using waitFor on text that updates when the data is returned. But my await waitFor(() => screen.findByText(expectedCellText)); always fails. Using screen.debug I've been able to pull up the tbody: 
<tbody
  class="m-b2404537 mantine-Table-tbody MRT_TableBody-module_root__kGhRy MRT_TableBody-module_root-grid__WdOGg MRT_TableBody-module_root-virtualized__TxPAi"
  style="--mrt-table-body-height: 54.7px;"
/>
<tbody
  class="m-b2404537 mantine-Table-tbody MRT_TableBody-module_root__kGhRy MRT_TableBody-module_root-grid__WdOGg MRT_TableBody-module_root-virtualized__TxPAi"
  style="--mrt-table-body-height: 54.7px;"
/>
It's always empty. I'm not sure what I may be doing wrong, or if there is something I can pass to waitFor. I've tried upping the timeout on waitFor to 2 seconds but still nothing. If it matters, the rows are virtualized.
3 Replies
ratty-blush
ratty-blushOP•2y ago
Here's a sample of a passing test (the elements "around" the table are all updating): 
    renderWithRouter({
      component: OrganizationsManagementPage,
      wrapper: Wrappers,
    });
    await screen.findByText('Showing 1 of 2 organizations');
    await act(() => userEvent.click(screen.getByText('Load More')));
    await screen.findByText('Showing all organizations');

    screen.debug(
      screen
        .getByText('Organization Name')
        .closest('table')!
        .querySelector('tbody')!,
    );
    renderWithRouter({
      component: OrganizationsManagementPage,
      wrapper: Wrappers,
    });
    await screen.findByText('Showing 1 of 2 organizations');
    await act(() => userEvent.click(screen.getByText('Load More')));
    await screen.findByText('Showing all organizations');

    screen.debug(
      screen
        .getByText('Organization Name')
        .closest('table')!
        .querySelector('tbody')!,
    );
That screen.debug is still printing an empty tbody -- the data is updating the bottom toolbar (the Load More button and the showing text) which is configured through useMantineReactTable call so it's being updated as the query is updated/actions are taken but still no rows render.
ambitious-aqua
ambitious-aqua•2y ago
you're probably running into this https://github.com/TanStack/virtual/issues/641
GitHub
No rows returned by useVirtualizer in unit tests · Issue #641 · Tan...
Describe the bug In browser table rows are rendered as expected. In unit tests useVirtualizer returns an empty array from rowVirtualizer.getVirtualItems(). The bug is introduce with changes introdu...
ratty-blush
ratty-blushOP•2y ago
Huzzah, I missed that looking through open issues because it's on TanStack/virtual -- which I did not realize was in use here. Thanks so much!

Did you find this page helpful?