使用 Enzyme 和 RTL 进行测试时,AG Grid React 不会渲染单元格值

hKR*_*RRR 6 reactjs ag-grid enzyme ag-grid-react react-testing-library

因此,最近我们将 ag-grid-react 和 ag-grid-community 从 27.0.1 更新到 28.0.0,之前的工作测试现在失败了。测试尝试从行单元格获取一个值并与给定值进行比较。

测试(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);
})})
Run Code Online (Sandbox Code Playgroud)

使用的行数据

[
  { CPS: 2, TST: 2, DERIVATIVE: "" },
  { CPS: 5, TST: 2, DERIVATIVE: "" },
]
Run Code Online (Sandbox Code Playgroud)

控制台登录测试

运行应用程序时,网格使用自定义 valueGetters 呈现单元格值。测试在 v27.3.0 中运行,并使用 ag-cell-value 类渲染 div,但不渲染值(在 v28.0.0 中,当尝试使用 ag-cell-value 类查找节点时甚至不渲染 div)

我们做错了什么吗?任何帮助表示赞赏!