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 className="ag-theme-quartz" 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 className="ag-theme-quartz" 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.