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

Question

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}/>);
});

Answer 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"}