React Data GridTesting AG Grid

Here we give some hints on testing AG Grid as part of your application.

Testing with Jest

If you're using Modules then you will have to make the following configuration changes to accommodate ES Modules - if you're using packages then this configuration is not required.

In order to test AG Grid with Jest you'll need to make the following configuration changes:

In jest.config.js add the following lines:

module.exports = {
    "transform": {
        "^.+\\.(ts|tsx|js|jsx|mjs)$": [
            "babel-jest"  // or "ts-test" or whichever transformer you're using
        ]
    },
    transformIgnorePatterns: ['/node_modules/(?!(@ag-grid-community|@ag-grid-enterprise)/)']
}

Testing with React Testing Library

In the following examples we will be using React Testing Library to test AG Grid. Each example will share a common App starting point that is defined below.

const App = () => {
    const [rowData] = useState([
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxster', price: 72000 }
    ]);
    const [colDefs, setColDefs] = useState<ColDef[]>([
        { field: 'make' },
        { field: 'model' },
        { field: 'price' },
    ]);

    return (
        <div style={{ height: 400, width: 600 }}>
            <AgGridReact
                rowData={rowData}
                columnDefs={colDefs} />
        </div>
    );
};

Testing Cell Contents

The following example shows how to validate the grid is displaying the expected values including those cells using a custom cell renderer.

// Custom Cell Renderer
const BuyCellRenderer = (props: CustomCellRendererProps) => {
    const buttonClick = () => props.node.setDataValue('bought', true);

    return (
        <>
            {props.data?.bought ?
                <span>Bought a {props.data?.make}</span> :
                <button onClick={buttonClick}>Buy: {props.data?.make}</button>
            }
        </>
    );
};

// Column Definitions with value formatter and cellRenderer
const [colDefs, setColDefs] = useState<ColDef[]>([
    { field: 'make' },
    { field: 'model' },
    { field: 'price', valueFormatter: (params) => "$" + params.value.toLocaleString()},
    { field: 'bought', cellRenderer: BuyCellRenderer }
]);

The code to test the valueFormatter and cellRenderer is as follows.

test('value formatter and cell renderer', async () => {
    // First render the App component we wish to tests
    render(<App />);

    // Test the value formatter by searching for the correct price string
    expect(screen.getByText('$72,000')).toBeDefined();

    // Now find the expected content of the cell renderer
    const porscheButton = await screen.findByText('Buy: Porsche');
    expect(porscheButton).toBeDefined();

    // Click the cell renderer to test it changes correctly
    act(() => porscheButton.click());
    expect(screen.findByText('Bought a Porsche')).toBeDefined();
});

Clicking Rows

To test clicking rows it is recommend to use userEvent from testing-library/user-event to trigger row click event handlers. The following test displays the last clicked row above the grid.

<div data-testid="rowClicked">Row Clicked: {rowClicked?.make}</div>
<div style={{ height: 400, width: 600 }}>
  <AgGridReact
      rowData={rowData}
      columnDefs={colDefs}
      onRowClicked={onRowClicked} />
</div>

test('render grid and click a row', async () => {
  render(<App />);

  const row = await screen.findByText('Ford');
  expect(row).toBeDefined();

  await userEvent.click(row);

  const rowClicked = await screen.findByTestId('rowClicked');
  expect(rowClicked.textContent).toBe('Row Clicked: Ford');
});

Cell Editing

The following example shows how to mimic a user editing a cell's value.

test('double click cell to edit', async () => {
  render(<App />);

  const porschePrice = await screen.findByText('$72,000')
  expect(porschePrice).toBeDefined();

  // double click to enter edit mode       
  await userEvent.dblClick(porschePrice);

  // Find the input within the cell.
  const input: HTMLInputElement = within(porschePrice).getByLabelText('Input Editor');
  // Type the new price value
  await userEvent.keyboard('100000');

  // Press enter to save
  fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });

  expect(screen.findByText('$100,000')).toBeDefined();

});

All the tests above and more can be found in the following GitHub Repo.

End to End (e2e) Testing with Playwright

Playwright is another popular e2e testing framework that can be used to test AG Grid applications. A few examples of how to use Playwright with AG Grid can be found in this Github Repo.