10

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}/>);
});
1
  • 2
    If you add a screen.debug() to your test, you'll notice that Price and Color do not appear in the output which is why React Testing Library cannot find them. I'm not sure why that is because I don't use ag-grid. Sorry 😬
    – kentcdodds
    Nov 5, 2020 at 23:41

2 Answers 2

13

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"}
3
  • 1
    Unless one of the fields uses groupCellRenderer. I haven't cracked that one yet.
    – olore
    Nov 30, 2020 at 19:14
  • May also need to suppressRowVirtualisation if your test case has a lot of rows.
    – Tyler
    Jan 22 at 0:03
  • 1
    This work around is no longer necessary as if the AG Grid viewpoint has 0 width, as is likely the case when it is being rendered with jsdom, then it will render all the columns. This change landed in 31.0.3 Jan 26 at 19:05
0

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();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.