Ag-Grid-React & React-Testing-library

Viewed 941

I have a custom cellRenderer component named CellInput.tsx

const CellInput = () => {
  const [localValue, setLocalValue] = useState();

  const handleChange = (event) => {
    setLocalValue(event.target.value)
  }

  return (
  <input className="input-cell" value={localValue} onChange={handleChange}/>
  )
}

This is my ag-grid table Table.tsx

const columnDefs = [
    {
      headerName: 'ABC',
      field: 'abc',
      minWidth: 100,
      cellRendererFramework: CellInput
    
    }
]

<AgGridTable columnData={columnDefs} rowData={rows} />

This is my test for the ag-grid where I am just debugging & getting the dom tree.

it("should be able to toggle the nif toggle button",async () => {
        const { container, debug } = render(<Table.tsx />);

        await wait(() => debug())
});

I observed Ag-grid intermittently adding an extra (span+ copy of cellRenderer) after ag-react-container class. Is this something expected ? As I am not able to see it in the Chrome Browser DOM Tree

Below is the screenshot for the debugged result Debug Result

This is happening randomly which is failing snapshot testing. Anyone faced similar issue or Is their anything I am missing here?

0 Answers
Related