AG Grid React does not render cell values when testing using Enzyme and RTL
Asked Answered
C

0

6

so recently we updated ag-grid-react and ag-grid-community from 27.0.1 to 28.0.0 and previous working tests now fail. Test tries to get a value from a row cell and compares to the given one.

Test (v. 27.3.0)

describe("Simple list rendering", () => {

const handleRowDoubleClick = () => { }
const handleRowSelect = () => { }
const formDataWithId = formData.map((item, index) => {
    const newItem = checkNumberLength(item, items);
    return { ...newItem, id: index };
});
const colDefs = [{
    headerName: "test",
    valueGetter: "7"
}]

const listRender = (
    <AgGridReact
        columnDefs={colDefs}
        rowData={formDataWithId}
        rowSelection="multiple"
        suppressClickEdit={true}
        onRowClicked={handleRowSelect}
        onRowDoubleClicked={handleRowDoubleClick}
        immutableData={true}
        rowHeight={28}
    />
)


let component
let agGridReact
beforeEach((done) => {
    component = mount(listRender);
    agGridReact = component.find(AgGridReact).instance();
    // don't start our tests until the grid is ready
    ensureGridApiHasBeenSet(component).then(() => done(), () => fail("Grid API not set within expected time limits"));
});

it('stateful component returns a valid component instance', () => {
    expect(agGridReact.api).toBeTruthy();
});

it("agGrid shows password field as * instead of string", () => {
    console.log(component.find(".ag-cell-value").first().html())
    expect(component.render().find(".ag-cell-value").first()).toEqual("7");
});

it("List contains derivative field", () => {
    render(listRender);
    expect(screen.getAllByText("5")).toHaveLength(1);
})})

RowData Used

[
  { CPS: 2, TST: 2, DERIVATIVE: "" },
  { CPS: 5, TST: 2, DERIVATIVE: "" },
]

Console log in test

When running the App the Grid renders the cell values using custom valueGetters. Test is running in v27.3.0 and renders the div using ag-cell-value class but not the value (in v28.0.0 does not even render the div when trying to find node using ag-cell-value class)

Is there something wrong we are doing? Any help is appreciated!

Commixture answered 20/7, 2022 at 12:26 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.