[test] apiRef.current.rootElementRef.current is null when running test without Strict Mode

[CalebJamesStevens]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

• https://github.com/CalebJamesStevens/mui-datagrid-issue

Steps:

1. clone repo
2. run yarn
3. run yarn jest

Current behavior 😯

column headers are not rendered in jest dom

Expected behavior 🤔

column headers should render

Context 🔦

This is happening because the renderContext in useGridColumnHeaders is set to null.

You can see here I'm logging out the params for the getColumnsToRender function in the hook.

You can also see that the result is that no element with a role of 'columnheader' is rendered

if (!nextRenderContext) {
      return null;
}

This statement in getColumnsToRender returns null which causes getColumnHeaders to also return null

  const getColumnHeaders = (params, other = {}) => {
    const columnsToRender = getColumnsToRender(params);
    if (columnsToRender == null) {
      return null;
    }
}

This is no bueno because the GridColumnHeaders component uses these functions to render the columnheader elements.

This is all happening because the handleScroll function is never called which seems to be the only function that actuall calls setRenderContext

And that happens because the dependency array for updateInnerPosition never triggers the callback.

[columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer, theme.direction]

As you can see this happens even with the most basic of DataGrid tests.

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
npx: installed 2 in 0.82s

  System:
    OS: macOS 13.0.1
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 6.14.14 - ~/.nvm/versions/node/v14.17.5/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.1
  npmPackages:
    @emotion/react: ^11.10.4 => 11.10.6 
    @emotion/styled: ^11.10.4 => 11.10.6 
    @mui/base:  5.0.0-alpha.127 
    @mui/core-downloads-tracker:  5.12.2 
    @mui/material: ^5.10.1 => 5.12.2 
    @mui/private-theming:  5.12.0 
    @mui/styled-engine:  5.12.0 
    @mui/styles: ^5.9.3 => 5.12.0 
    @mui/system: ^5.4.1 => 5.12.1 
    @mui/types:  7.2.4 
    @mui/utils:  5.12.0 
    @mui/x-data-grid:  6.2.1 
    @mui/x-data-grid-pro: ^6.0.4 => 6.2.1 
    @mui/x-license-pro:  6.0.4 
    @types/react: ^18.0.28 => 18.2.0 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.5 => 4.9.5 

Order ID or Support key 💳 (optional)

37b83db94a4536050ab7b3cc2e79a6a5Tz01NjU3NixFPTE3MDMzNDc4NzI4MjAsUz1wcm8sTE09cGVycGV0dWFsLEtWPTI=

[m4theushw]

Investigating this problem I noticed that the test passes when running with Strict Mode, which explains why our tests are green. You can use this as workaround for now.

<React.StrictMode>
  <DataGrid
    rows={rows}
    columns={columns}
  />
</React.StrictMode>

[CalebJamesStevens]

Investigating this problem I noticed that the test passes when running with Strict Mode, which explains why our tests are green. You can use this as workaround for now.

<React.StrictMode>
  <DataGrid
    rows={rows}
    columns={columns}
  />
</React.StrictMode>

This is what we'll do for now thanks