Hello,
Our team recently implemented RTL (React Testing Library) for component level testing. However, when we try to manually input values into one of our handsontable tables in an RTL test, it seems like the test cannot execute the cell editing action. The test is able to locate and identify table cells, but cell editing actions are not executed. Here is our attempt at cell editing in an RTL test:
it("Cell input validation works", async () => {
const {getAllByRole, getByRole} = rendered;
let cells = getAllByRole("cell");
expect(cells[1]).toHaveTextContent("40");
fireEvent.focus(cells[1]);
fireEvent.keyDown(cells[1], {key: "a", code: "KeyA", charCode: 65});
fireEvent.keyDown(cells[1], {key: "Tab", code: 9});
/* Test fails on the following line because the cell value was not updated in the above steps: */
expect(cells[1]).toHaveTextContent("a");
expect(cells[1]).toHaveStyle({color: "#FCE7E7"});
let textbox = getByRole("textbox", {hidden: true});
expect(textbox).toHaveTextContent("Must be a valid positive or negative number.");
});
Has anyone found a way to manipulate cell values in an RTL test?