1

I am having trouble testing grouped cells in ag-grid react with React-testing-library.

My Grid:


const MyGrid = props => {
  const rowData = [
    {
      model: 'samsung',
      name: 'My TV',
      room: 'living room',
      connectedDevices: [
        {
          type: 'receiver',
          deviceName: 'My Receiver',
        }
      ]
    }
  ];

  const detailCellRendererParams = {

    detailGridOptions: {

      columnDefs: [
        {field: 'type'},
        {field: 'deviceName'},
      ],
      // suppressColumnVirtualisation: true,
    },
    getDetailRowData: params => params.successCallback(params.node.data.connectedDevices),
  };


  return (
    <AgGridReact
      colDefs={[
        {field: model},
        {field: name, cellRenderer: 'agGroupCellRenderer'},
        {field: room},
      ]}
      rowData={rowData}

      masterDetail={true}

      detailCellRendererParams={detailCellRendererParams}
      suppressColumnVirtualisation={true}
    />
  );
}

Then in my test

describe('Test MyGrid', () => {
  it('Should display the connected device in the detail grid', async () => {
    const groupCell = await screen.findByText('My TV');
    user.dblClick(groupCell);
    // user.click(document.getElementsByClass('ag-icon-tree-closed')[0]);
    
    const connectedDevices = [
      {
        type: 'receiver',
        deviceName: 'My Receiver',
      }
    ];

    for (const d of connectedDevices) {
      expect(screen.getByText(d.name)).toBeInTheDocument();
    }
  });
});

However the test doesn't even make it past the await screen.findByText('My TV'). When I view the html in the testing playground using screen.logTestingPlaygroundUrl(). The column header is present but none of the actual gridcell elements for the name column can be found. I experimented with suppressing the column virtualization of the detail grid after viewing this thread, but that didn't work. Has anyone out there found success testing grouped grid in ag-grid?

0 Answers0