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