Блог

У меня есть пользовательский компонент CellRenderer с именем CellInput.tsx

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

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

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

Это моя таблица ag-grid Table.tsx

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

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

Это мой тест для ag-grid, где я просто отлаживаю и получаю дерево dom.

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

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

Я наблюдал, как Ag-grid периодически добавлял дополнительный (span копия CellRenderer) после класса ag-react-container. Это что-то ожидаемое? Поскольку я не могу видеть это в дереве DOM браузера Chrome

Ниже приведен скриншот для отлаженного результата результата отладки

Это происходит случайным образом, что не позволяет выполнить тестирование моментальных снимков. Кто-нибудь сталкивался с подобной проблемой или мне здесь чего-то не хватает?