Test Ag Grid with react-testing-library: implement click on cell

Question

I want to test a functional component that uses AG grid, in particular, I need to implement a click on AG grid cell. For tests I use react-testing-library. But the thing is, cell nodes are not visible and when I did screen.debug it didn't show any html related to grid cells.

At first I thought that AG grid just didn't yet mount on the dom, but its other elements, like rows and rowGroups are found by selectors, so probably this is not the case. Could you please give any idea why AG grid cells are not visible and what should I do to access them?

Answer 1

I know this an old question but maybe this response can help someone else that land in this question as I did. I was able to test the cell click with react-testing-library using the following code:

await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
//the aria-rowcount depends on the number of rows to render, I only pass 1
await waitFor(async () => expect(await screen.findByRole('grid')).toHaveAttribute('aria-rowcount', '3'));
await waitFor(async () => expect(screen.getByText('some text')).toBeInTheDocument());

await waitFor(async () => fireEvent.click(screen.getByText('some text')), {timeout: 5000});