Columns not rendering consistently during tests

[chrisahardie]

I'm submitting a ... (check one with "x")

[ X ] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of ag-Grid'
[] support request => see 'Requesting Community Support'

Providing a Reproducible Scenario
The reproducible scenario depends on a test environment, so I have created a Github project that demonstrates the issue:

https://github.com/chrisahardie/ag-grid-rtl

Current behavior

Under certain circumstances, ag-grid will not render all expected columns during testing. In the aforementioned project I created, there are two tests exercising two ag-grid grids. The grid that fails testing differs from the grid that passes testing by a couple column definitions:

const columnDefs = [
    // Comment out the first ColDef and the test will pass!
    {
      headerCheckboxSelection: true,
      checkboxSelection: true,
    },
    { headerName: t("ccn"), field: "ccn" },
    {
      headerName: t("consignee"),
      field: "consignee",
      cellRenderer: (param) =>
        `${param.data.consignee_name}<br/>
       ...
    },
    {
      headerName: t("shipper"), 
      field: "shipper",
      cellRenderer: (param) =>
        `${param.data.shipper_name}<br/>
       ...,
    }
  ];

My test attempts to find part of the consignee's name in the mounted grid:

test('grid that fails test', async () => {
  render(<FailingGrid />);
  const consigneeName = await screen.findByText(/hank/i, undefined, { timeout: 5000});
  expect(consigneeName).toBeInTheDocument();
}, 10000);

When I run npm run test this test will fail, and the markup the component has emitted during failure will be written to the terminal. The ccn column appears, but the consignee column does not.

If I remove the first column definition - the checkbox - then the consignee column WILL get rendered and this test will start passing!

Expected behavior
All columns should be rendered consistently as they are rendered in the browser.

Please tell us about your environment:

Windows, VS Code, npm, Jest,

• ag-Grid version: X.X.X
  18.1.2

• Browser:
  N/A Node v. 12.16.1

• Language:
  all

[matthewwoodruff]

Hi @chrisahardie, this is by no means the ideal solution but have you tried adding the suppressColumnVirtualisation grid property? This is our current fix. The problem we are seeing is that ag grid cannot determine the correct window size when running in a test environment and therefore hides most of the columns.

[chrisahardie]

Thanks @matthewwoodruff , sorry I didn't find this during my search of issues! Setting the attribute does appear to work, so I'll use it as a workaround. I presume you are tracking this elsewhere and it's ok to close this issue?

[makinggoodsoftware]

Hi,

Your ticket has been flagged as in_zendesk, it means that we recognize this as an issue worth investigating so we have moved it to our official support channel for customers (zendesk)

We will carry on there with the investigation and we will update you as soon as possible.

Thanks

[davis4acca]

Hi,

Thanks for raising this issue.

Ag-grid renders the columns based on the viewport, if the viewport is not rendered properly or there are no dimensions the grid will not render any columns.

As matthewwoodruff already noted, you can suppress this behaviour with suppressColumnVirtualisation.

This will force the grid to render all the columns in the grids viewport.

Hope this helps!

[matthewwoodruff]

@davis4acca In a unit test environment is there a way you would recommend setting the viewport dimensions so the grid can obtain the dimensions correctly? For example when using react testing library

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[PatrickNausha]

[...] have you tried adding the suppressColumnVirtualisation grid property?

This appears to be a recommended solution on the ag-grid blog.

If you are testing by querying JSDOM, then you'll need to either turn off DOM virtualisation or ensure that your grid container is large enough to contain all your rows and columns.

https://blog.ag-grid.com/testing-ag-grid-react-jest-enzyme/#querying-dom
https://www.ag-grid.com/documentation/javascript/dom-virtualisation/?_ga=2.43530085.155693877.1614367611-2106463624.1614273328#column-virtualisation

[danyrojj]

hell yeah! solved this long lasting headache thanks to @matthewwoodruff

[fcaballero]

Hi, I'm facing similar issue but with grouped rows, the cell value is not there but the count is. I used the workaround you mentioned above and still not able to see the value:

I'm using version 26.2.0, we have an enterprise license.
Thanks

[itsgdpierzchalski]

Hi, I'm facing similar issue but with grouped rows, the cell value is not there but the count is. I used the workaround you mentioned above and still not able to see the value:

I'm using version 26.2.0, we have an enterprise license. Thanks

@fcaballero I have the same problem. Did you solve it?

[fcaballero]

@itsgdpierzchalski we've upgraded to version 28, that should solve the issue.

[StephenCooper]

For anyone who finds this ticket and is running tests with jsdom then as of AG Grid 31.0.3 you no longer need to suppress column virtualization.

[JANA-itsaishvili]

we are on 31.2.0 and this bug was driving me nuts with vitest and react-testing-library. suppressColumnVirtualisation helped, but it's not ideal

[gul-sicka-1]

I am facing a similar issue with filters. I have a location Filter and it has checkboxes for different locations. The first checkbox is always Select All. For some reason, in my test cases, only the Select All checkbox is rendered in the DOM, and the other checkboxes for other locations are not rendered. I have used suppressFilterVirtualisation and many other solutions but nothing has worked.