1

We are looking to test a callback for editing cells.

Code:

const App = () => {
    const useUpdateAndSave = useCallback((event) => {
        console.log("Event - onEditComplete: ", event);
        
    }, []);

    return (
        <div>
           <ReactDataGrid
               idProperty="id"
               onEditComplete={useUpdateAndSave}
               columns={columns}
               dataSource={dataSource}
           />
        </div>
    );
};

We have tried using @testing-library/user-event to double click the cell, but it does not seem to re-render the DOM with the <input ...> element that we see in the browser.


it("edits the cell", async () => {
    // We can confirm these elements are found
    const quantityCell = await screen.findByText(999);
    const parent = await quantityCell.parentElement;
    
    // We have tried dblClick(parent) and dblClick(quantityCell)
    userEvent.dblClick(parent);

    // this does not show the same DOM modification we see in the browser
    screen.debug(parent); 

    // This throws an exception - not found.
    const input = await screen.findByDisplayValue(999);
});

Is there a preferred approach, or different testing tools for @inovua/reactdatagrid?

We would love to see an example of a test of this kind.

Thank you in advance!

Brian Zitzow
  • 148
  • 1
  • 8

0 Answers0