[DataGrid] Only three columns are rendered in jsdom

[mattcarlotta]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

With the inclusion of #1361, jsdom appears to only be partially rendering columns. The first two (with checkbox) columns within the array are being rendered, while the rest are hidden.

Expected Behavior 🤔

All columns should be rendered and visible.

Steps to Reproduce 🕹

Repo here.

Instructions can be found here.

Context 🔦

Since not all columns are rendered, I can't test secondary actions (my table actions) nor can I achieve full columns coverage.

Your Environment 🌎

`npx @material-ui/envinfo`

System:
    OS: Linux 5.8 Linux Mint 20.1 (Ulyssa)
  Binaries:
    Node: 14.16.1 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 6.14.12 - /usr/bin/npm
  Browsers:
    Chrome: 90.0.4430.85
    Firefox: 88.0
  npmPackages:
    @emotion/react: ^11.1.5 => 11.1.5 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @material-ui/core: ^4.11.4 => 4.11.4 
    @material-ui/data-grid: https://pkg.csb.dev/mui-org/material-ui-x/commit/0c03787f/@material-ui/data-grid => 4.0.0-alpha.26 
    @material-ui/styles:  4.11.4 
    @material-ui/system:  4.11.3 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react:  17.0.4 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.2.4 => 4.2.4

[oliviertassinari]

@mattcarlotta Thanks for reporting this limitation. I can confirm with this test case:

diff --git a/packages/grid/data-grid/src/tests/layout.DataGrid.test.tsx b/packages/grid/data-grid/src/tests/layout.DataGrid.test.tsx
index 984ec63b..eebe2074 100644
--- a/packages/grid/data-grid/src/tests/layout.DataGrid.test.tsx
+++ b/packages/grid/data-grid/src/tests/layout.DataGrid.test.tsx
@@ -8,7 +8,7 @@ import {
 import { useFakeTimers, stub } from 'sinon';
 import { expect } from 'chai';
 import { DataGrid, GridValueGetterParams, GridToolbar } from '@material-ui/data-grid';
-import { getColumnValues, raf, sleep } from 'test/utils/helperFn';
+import { getColumnValues, raf, sleep, getRow } from 'test/utils/helperFn';

 describe('<DataGrid /> - Layout & Warnings', () => {
   // TODO v5: replace with createClientRender
@@ -32,6 +32,32 @@ describe('<DataGrid /> - Layout & Warnings', () => {
     columns: [{ field: 'brand' }],
   };

+  it.only('should support no virtualization', () => {
+    const columns = [
+      { field: 'id', headerName: 'ID', width: 70 },
+      { field: 'firstName', headerName: 'First name', width: 130 },
+      { field: 'lastName', headerName: 'Last name', width: 130 },
+      {
+        field: 'age',
+        headerName: 'Age',
+        type: 'number',
+        width: 90,
+      },
+      {
+        field: 'action',
+        renderCell: () => <button>Action</button>,
+      },
+    ];
+
+    const rows = [{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }];
+    render(
+      <div style={{ height: 400, width: '100%' }}>
+        <DataGrid autoHeight rows={rows} columns={columns} pageSize={5} />
+      </div>,
+    );
+    expect(getRow(0).querySelectorAll('[role="cell"]').length).to.equal(5);
+  });
+
   describe('Layout', () => {
     before(function beforeHook() {
       if (/jsdom/.test(window.navigator.userAgent)) {

[oliviertassinari]

It looks like we need an API to further disable virtualization: #1781, autoHeight is not enough. We likely will need the same for the print feature #200.

For benchmark: https://www.ag-grid.com/javascript-grid/dom-virtualisation/#column-virtualisation.

[erwelch]

We just purchased an x-grid license and replaced our tables with x-grid and are seeing this too. Unfortunately this bug blocks us as half of our tests fail now with only 3 columns being rendered. Would love to know when a fix might be available!

[squidsoup]

Hi there, is anyone able to confirm that this bug is being actively addressed? We currently have about half of our tests disabled which is less than ideal!

[flaviendelangle]

#1781

The solution is being discussed here
I may have the time to take a look soon 👍

[flaviendelangle]

@m4theushw we should be able to close this issue right ?

[m4theushw]

Closed via #2326

In the next release, we will have a disableVirtualization prop which can be used to completely disable the virtualization and allow tests to see all columns.