Datatable broken under vitest / react-testing-library tests

[Aram1d]

Describe the bug

1. We built components with mantine-datatable and they work perfectly in our react app.
2. We started to write tests using vitest / RTL / jsDom
3. Tests for a given table do not work. Even when records prop is correctly populated, the noRecords message remains, and rows appears unpopulated.

To Reproduce
Steps to reproduce the behavior:

very small repo with one table and one test to reproduce the issue: repo

Expected behavior
I would expect to be able to get the rows with their data on my RTL tests so I can make assertions

Screenshots

The real table in the repo I linked:

What's rendered on my RTL tests:

Note the empty <tr> tags.

Desktop (please complete the following information):

• OS: Kubuntu 24.04 LTS x86_64 with 6.8.0-39-generic kernel
• Browser none (tests runs on node.js, v20.15.1)
• Version 7.11.3

Additional context
Add any other context about the problem here.

[icflorescu]

I believe you're not importing mantine-datatable/styles.css.
This appeared countless times before, see here, here, here, here...

[icflorescu]

Please let me know and/or close the issue if correctly importing the styles solves the problem.

[Aram1d]

@icflorescu First of all, thanks for taking time for my issue.

I am working with your table for a long time and I'm fully aware of the importance of importing the css files.
That said, I did import mantine-datatable/styles.layer.css and not mantine-datatable/styles.css.

I have added mantine-datatable/styles.css import in TestTable.tsx in my reproduction repo, so we are sure these styles are imported in tests too.

I still get the same issue. So this seems not to be an issue with my code. I'm almost sure you did build this library using dom manipulation that are not supported by jsDom, causing the tests to fail.

[CarlosLlongo]

We are having the same issue in our project. The table always renders in tests showing the No Records message. Are there any examples of how to test the DataTable with react-testing-library? I could find nothing in the documentation.

[jjalonso]

Hi @icflorescu, Im facing the same issue in tests only, not problem with the build.

When debugging, props are delivered well to the DataTable component but still show 'No records' been trying even with waitFor, finds... etc... nothing.

Is this project tested? I could not find them. 🤔
Thanks!

[masonembry]

Yeah, I've just spent two hours on this. I'm trying to write a dead simple test that data is rendered when provided. No dice.

[hey-robin]

I'm running into this issue as well. At this point, I'd love to see a working example of testing a dataTable with rtl

[jedusei]

I've run into a similar issue. By default, Vitest doesn't process CSS files, so you must enable that by specifying css: true in the configuration (docs). After doing so, the No Records message should no longer show.

But there's still a problem: the table rows are all blank:

(I use Vitest Preview to preview the test screen in the browser)

If I add selectedRecords={[]} to the DataTable, the checkbox column is shown, but none of the other columns are there:

[jedusei]

I've figured it out. This is the line that prevents the columns from showing up:

mantine-datatable/package/DataTableRowCell.tsx

Line 50 in 2d198b2

if (!useMediaQueryStringOrFunction(visibleMediaQuery)) return null;

useMediaQueryStringOrFunction uses the Mantine useMediaQuery hook, which will always return false in tests. After changing false to true on that line, the columns show up!

@Aram1d I've created a fork of your repo with these fixes here: https://github.com/jedusei/mantine-datatable-rtl-issue

[jedusei]

@icflorescu I'm not sure that modifying the media query matcher to always return true is the best solution. That may affect other components that rely on useMediaQuery or window.matchMedia.

I think it would be better to change this line:

mantine-datatable/package/DataTableRowCell.tsx

Line 50 in 2d198b2

if (!useMediaQueryStringOrFunction(visibleMediaQuery)) return null;

to something like this:
if (!useMediaQueryStringOrFunction(visibleMediaQuery) && visibleMediaQuery) return null;

[leandrowkz]

I'm facing the same issue, however I was able to get working by mocking the useMediaQuery hook only:

jest.mock('@mantine/hooks', () => ({
  ...jest.requireActual('@mantine/hooks'),
  useMediaQuery: () => jest.fn().mockReturnValue(true),
}))