'How can I test the content in ag-grid using testing-library?

I am trying to write a few simple tests that the headers and data I want to render are showing up as expected. I created a repo - https://github.com/olore/ag-grid-testing-library to reproduce. The table looks as I would expect when opened in a browser.

<AgGridReact
  columnDefs={ /* First 2 always findable, others never */
  [
    { field: "make" }, 
    { field: "model" }, 
    { field: "price" }, 
    { field: "color" },
  ]}
  rowData={
  [{ 
    make: "Toyota", 
    model: "Celica",
    price: "35000", 
    color: "blue" 
    }]
  }
  pagination={true}></AgGridReact>

And the tests

test('renders all the headers', async () => {
  const { getByText } = render(<GridExample />);
  expect(getByText("Make")).toBeInTheDocument();  // PASS
  expect(getByText("Model")).toBeInTheDocument(); // PASS
  expect(getByText("Price")).toBeInTheDocument(); // FAIL
  expect(getByText("Color")).toBeInTheDocument(); // FAIL
});

Locally, the first 2 column headers and data are accessible, but none of the other columns are rendered, as I can see in the output of testing-library. I am using --env=jsdom-fourteen as recommended by other posts.

Strangely enough, no headers or data are rendered for the tests when in the codesandbox for this repo, as with local, the browser looks correct. https://codesandbox.io/s/gallant-framework-e54c7. I then tried waiting for gridReady https://codesandbox.io/s/intelligent-minsky-wl17y, but it didn't make a difference.

EDIT: Also tried directly calling a function in onGridReady, same problem (first 2 columns pass, second 2 fail)

test('renders all the headers', async (done) => {
  let page;

  const onReady = () => {
    expect(page.getByText("Make")).toBeInTheDocument();  // PASS
    expect(page.getByText("Model")).toBeInTheDocument(); // PASS
    expect(page.getByText("Price")).toBeInTheDocument(); // FAIL
    expect(page.getByText("Color")).toBeInTheDocument(); // FAIL
    done();
  }
  page = render(<GridExample ready={onReady}/>);
});


Solution 1:[1]

ag-grid uses Column Virtualisation, so it seems the solution here is to disable it via the suppressColumnVirtualisation attribute on the <AgGridReact> element.

  <AgGridReact
        suppressColumnVirtualisation={true}
        ...

Boom! All the tests pass!

In reality, it's probably ideal to only suppress this during testing:

        suppressColumnVirtualisation={process.env.NODE_ENV === "test"}

Solution 2:[2]

An addition to @olore's answer.

If you use server side data source, make sure

  1. Your mock server responds with expected data, not error.
  2. You use asynchronous selector in testing library, at least for the first cell of the row.

expect(await findByText('Price')).toBeInTheDocument();

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 olore
Solution 2 Tsvetkova Maria