[question] All of my tests broke when trying to upgrade @mui/x-data-grid-pro from 6.1.0 to 6.3.1

[DavidArmendariz]

Order ID or Support key 💳 (optional)

46207

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

We have configured dependabot to automatically fire updates to packages. We can't update @mui/x-data-grid-pro because some tests are failing and we don't know why. The tests work fine with the 6.1.0 version. After debugging the tests, we have found that not even the column headers are rendering.

An example of our test:

test.only("it doesn't blow up", async () => {
  render(<MyComponent {...props} />);
  await screen.findByText('Some column title that is found with version 6.1.0 but not with version 6.3.1');
});

We have increased the timeout of the tests and what not to see if it was that, but it never shows the column headers. By using screen.debug, I see that the output with version 6.3.1 is:

<div
  class="MuiDataGrid-columnHeaders-clEJFH dhqqwW MuiDataGrid-columnHeaders MuiDataGrid-withBorderColor"
  style="min-height: 39px; max-height: 39px; line-height: 39px;"
>
  <div
    class="MuiDataGrid-columnHeadersInner-geCCWJ fJdBWn MuiDataGrid-columnHeadersInner"
    role="rowgroup"
  />
</div>

While with version 6.3.0 we have the columns:

<div
  class="MuiDataGrid-columnHeaders-clEJFH dhqqwW MuiDataGrid-columnHeaders MuiDataGrid-withBorderColor"
  style="min-height: 39px; max-height: 39px; line-height: 39px;"
>
  <div
    class="MuiDataGrid-pinnedColumnHeaders-iHUPsn bSxnLP MuiDataGrid-pinnedColumnHeaders MuiDataGrid-pinnedColumnHeaders--left"
    role="rowgroup"
  >
    <div
      aria-rowindex="1"
      class="MuiDataGrid-columnHeaderRow-gDlymu dAbpFT"
      role="row"
    >
      <div
        aria-colindex="1"
        aria-label="Patient"
        aria-sort="none"
        class="MuiDataGrid-columnHeader MuiDataGrid-columnHeader--sortable MuiDataGrid-withBorderColor patient-header"
        data-field="patient-details"
        role="columnheader"
        style="height: 39px; width: 0px; min-width: 0; max-width: 0;"
        tabindex="0"
      >
        <div
          class="MuiDataGrid-columnHeaderDraggableContainer"
          draggable="false"
        >
          <div
            class="MuiDataGrid-columnHeaderTitleContainer"
          >
            <div
              class="MuiDataGrid-columnHeaderTitleContainerContent"
            >
              <div
                aria-label=""
                class="MuiDataGrid-columnHeaderTitle-jGUyNI hrYSLA MuiDataGrid-columnHeaderTitle"
                data-mui-internal-clone-element="true"
              >
                Some column title that is found with version 6.1.0 but not with version 6.3.1
              </div>
            </div>
          </div>
        </div>
...

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 113.0.5672.63
    Firefox: Not Found
  npmPackages:
    @mui/base:  5.0.0-alpha.128 
    @mui/core-downloads-tracker:  5.12.3 
    @mui/material: ^5.12.3 => 5.12.3 
    @mui/private-theming:  5.12.3 
    @mui/styled-engine-sc:  5.10.0 
    @mui/system:  5.12.3 
    @mui/types:  7.2.4 
    @mui/utils:  5.12.3 
    @mui/x-data-grid:  6.3.1 
    @mui/x-data-grid-pro: ^6.3.1 => 6.3.1 
    @mui/x-date-pickers:  6.3.0 
    @mui/x-date-pickers-pro: ^6.3.0 => 6.3.0 
    @mui/x-license-pro: ^6.0.2 => 6.0.4 
    @types/react: ^17.0.40 => 17.0.40 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: ^5.3.10 => 5.3.10 
    typescript: ^5.0.4 => 5.0.4

[m4theushw]

Please see #8697 (comment)

[DavidArmendariz]

@m4theushw That didn't work for me.

[martinhonza]

I think we have the same problem, we updated package from v5 to v6@6.3.1 and with the help of jest-preview I can see that everything renders as before but table is empty, no rows, no columns. Only .MuiDataGrid-main container is rendered with empty MuiDataGrid-columnHeaders

[joaosousafranco]

Same here

[m4theushw]

Fixed by #8968

[DavidArmendariz]

@m4theushw Sorry, not sure how the PRs work for MUI. Is this now in version 6.3.1 or we'll have to wait for another version? Also, will we still need the ResizeObserverMock?

[MBilalShafi]

@DavidArmendariz It has been released in version 6.4.0, you can upgrade to this version to have the fix available

[cherniavskii]

ResizeObserver mock should not be necessary starting from 6.4.0 🙂