4

Does anyone know how to test AgGridReact with Jest/Enzyme? I'm trying to mock the onGridReady callback that should be invoked automatically, but it doesn't seem to be firing. Here's a simplified version of my test:

import React from "react";
import { mount} from "enzyme";

const AgGridReact =
  typeof window === "undefined"
    ? () => null
    : require("ag-grid-react").AgGridReact;

var spy = jest.fn();

// Grid.prototype.onGridReady = spy;
var columnDefs = [
  { headerName: "Make", field: "make" },
  { headerName: "Model", field: "model" },
  { headerName: "Price", field: "price" }
];

// specify the data
var rowData = [
  { make: "Toyota", model: "Celica", price: 35000 },
  { make: "Ford", model: "Mondeo", price: 32000 },
  { make: "Porsche", model: "Boxter", price: 72000 }
];

// let the grid know which columns and what data to use
var gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  onGridReady: spy
};

mount(<AgGridReact id="myGrid" {...gridOptions} />);

expect(spy).toHaveBeenCalledTimes(1);

Any thoughts/suggestions would be appreciated. Thanks!

lgants
  • 3,665
  • 3
  • 22
  • 33

2 Answers2

2

instead of mount you should use shallow. enzymes shallow method will expose all the custom events and you can simulate them easily.

    //AgGridReact is wrapped inside Grid component
    const wrapper = shallow(<Grid/>)

    const agGridReact = wrapper.find(AgGridReact)

    agGridReact.simulate('gridReady')
Roopak Puthenveettil
  • 1,387
  • 2
  • 13
  • 27
2

The function onGridReady is being called asynchronously so you can't check it right after the mount call. Instead, wrap it to a promise or use the done function in Jest.

tomas.satinsky
  • 821
  • 7
  • 4