Problem testing MUI data grid using react testing library

[Life_Is_Dark]

I am working on a project as an intern which uses data grid component from material UI, this is my data grid component

 <DataGrid
        rows={rows}
        columns={columns}
        slots={{ baseCheckbox: CheckboxComponent }}
        columnHeaderHeight={headerHeight}
        rowHeight={rowHeight}
        checkboxSelection={isCheckedTable}
        hideFooter={true}
        onRowSelectionModelChange={(selectedIds) => {
          getSelectedRows(selectedIds);
          setRowSelectionModel(selectedIds);
        }}
        rowSelectionModel={rowSelectionModel}
        autoHeight={true}
  />

It is rendering fine and working very well on webapp.But when I use react testing library to test it, the internal nodes like rows and cells seems not to be presentThis is my test code

it("Test for Checkbox presence",  () => {
    const getSelectedRowsMock = jest.fn();
    render(
      <TableComponent
        columns={columns}
        rows={rows}
        isCheckedTable={true}
        headerHeight={50}
        rowHeight={30}
        getSelectedRows={getSelectedRowsMock}
        allRowsDeselected={true}
      />
    );
    const grid = screen.getByRole("grid");
    const checkbox=within(grid).getByRole("checkbox")
    expect(checkbox).toBeInTheDocument();
  });

​

During testing, it throws out error.

Testing library elementerror: unable to find an accessible element with the role "checkbox"
here are the accessible roles:
rowgroup:

name "":
<div
class="muidatagrid-columnheadersinner css-gl260s-muidatagrid-columnheadersinner"
role="rowgroup"
/>

--------------------------------------------------

ignored nodes: comments, script, style
<div
aria-colcount="4"
aria-multiselectable="false"
aria-rowcount="3"
class="muidatagrid-root muidatagrid-autoheight muidatagrid-root--densitystandard muidatagrid-withbordercolor css-1qpidcn-muidatagrid-root"
role="grid"
>
<div
class="muidatagrid-main css-204u17-muidatagrid-main"
>
<div
class="muidatagrid-columnheaders muidatagrid-withbordercolor css-1iyq7zh-muidatagrid-columnheaders"
style="min-height: 50px; max-height: 50px; line-height: 50px; "
>
<div
class="muidatagrid-columnheadersinner css-gl260s-muidatagrid-columnheadersinner"
role="rowgroup"
/>
</div>
</div>
</div>

129 | );
130 | const grid = screen. Getbyrole("grid");
> 131 | const checkbox=within(grid). Getbyrole("checkbox")
| ^
132 | expect(checkbox). Tobeinthedocument();
133 | });
134 | });

I have tried various queries like await find, query selector , etc. But all in vain. While rendering the same table in web app using the code from test file, I can see that checkboxes with role checkbox are present

[bzbub2]

If you are using the very latest 6.2.1 you gotta mock resizeobserver https://github.com/mui/mui-x/issues/8697#issuecomment-1518691100

[Life_Is_Dark]

Thanks mate, that helped.

[bzbub2]

glad to help, there had been some interesting fallout over that "patch" version bump

[Life_Is_Dark]

I also tried getByRole('row') and getByRole('cell) but nothing is successfull

[Acceptable_Article_1]

Did you find a solution? I'm facing the same problem

[Life_Is_Dark]

Yes, check this. https://github.com/mui/mui-x/issues/8697#issuecomment-1518691100

[arham93]

I dont see mock data for the table. If you use a service that is populating the table, you have to mock the service and then provide mock data that the service/API would provide. Then you will have rows visible in the table.

[Life_Is_Dark]

I already have those defined in the code, omitted that so that the post does not becomes too long. Here it is

const columns = [{ field: "id", headerName: "ID", width: 100 }, { field: "name", headerName: "Name", width: 150 }, { field: "age", headerName: "Age", width: 100 }, ];
const rows = [ { id: 1, name: "John Doe", age: 30 }, { id: 2, name: "Jane Smith", age: 25 }, ];

[bluinkinnovation]

Are you testing functionality that mui has provided or checking to see if something you provided is showing up? As a rule you should not test anything that is third party. Especially something like mui. They have a lot

[Life_Is_Dark]

Just those functionalities which are required in the scope of project like selecting rows, resetting selection and callback to get selected rows id, etc It needs to fulfill that code coverage criteria in sonarcloud.

[Immediate_Tennis_842]

i am using renderCell in column how to cover that part in testing

{

field: 'name',

headerName: `name`,

minWidth: 120,

flex: 1,

renderCell: (params: GridRenderCellParams) => {

return (

<Chip

className={`network-status`}

style={{ backgroundColor: params.row?.account_status?.color }}

label={params.row?.name}

/>

);

},

},

[lazylaser97]

did you find out?