I am currently working on writing Jest tests to evaluate the functionality of my ag-grid table.
So far, I have created tests to check the default data in the grid and to test a button that adds an additional row of data to the grid.
I am now attempting to modify a cell by using in-line editing with a simulated double click on the desired cell. However, despite following up with userEvent.type(), the cell does not seem to update. It is unclear whether this issue arises due to asynchronous behavior delaying the data update or if there is an error in the simulation of typing/clicking.
The failing test code snippet is as follows:
test("tests the inline cell editing", async () => {
const onClick = jest.fn();
render(<DummyGrid onClick={onClick} />);
const row = screen
.getAllByRole("row")
.filter((item) => item.getAttribute("row-id") === "1");
fireEvent.doubleClick(row[1]);
userEvent.type(row[1], "GT{enter}");
await waitFor(() => {
expect(screen.getByText("GT")).toBeInTheDocument();
});
});Below is the DummyGrid component for ag-grid:
import React, { useState } from "react";
import { AgGridReact } from "ag-grid-react/lib/agGridReact";
import { ColDef, ValueSetterParams } from "ag-grid-community";
import GridButton from "./GridButton";
import Car from "./car";
import { Button } from "react-bootstrap";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine-dark.css";
// Remaining component code omitted for brevity
export default DummyGrid;Any assistance or insights on testing ag-grid with Jest, specifically regarding in-line editing, would be highly appreciated. Limited resources are available on testing in-line ag-grid editing with Jest compared to testing buttons that trigger updates to the grid.