如何在酶中挂载ag-grid的实际内容？

Question

使用Ag-Grid时，如果能够针对DOM元素进行点击测试(例如，在设置点击处理程序时，希望针对第二行，模拟点击，并监视结果操作)，那就太好了。

然而，AG-Grid不会在酶测试中呈现实际的网格内容，即使是在安装时也是如此。它只会渲染一个空的div。

我在这里创建了一个简单的CodePen (https://codesandbox.io/s/ag-grid-enzyme-9wkgn)，它有一个通过的测试和一个失败的测试-但是，我似乎无法让它识别底层的网格内容。

describe("ag-grid", () => {
  let app;
  beforeEach(() => {
    app = mount(<Grid />);
  });
  it("renders a grid", () => {
    expect(app.find("AgGridReact").length).toBe(1);
  });
  it("renders 3 rows", () => {
    console.log(app.debug());
    expect(app.find(".ag-row").length).toBe(3);
  });
});

我希望有两个成功的测试--相反，debug打印出来：

<Grid>
  <div className="ag-theme-balham" style={{...}}>
    <AgGridReact columnDefs={{...}} rowData={{...}}>
      <div style={{...}} />
    </AgGridReact>
  </div>
</Grid> 

以及测试结果：

expect(received).toBe(expected)

Expected value to be (using ===):
  3
Received:
  0

  17 |   });
  18 |   it("renders 3 rows", () => {
  19 |     console.log(app.debug());
> 20 |     expect(app.find(".ag-row").length).toBe(3);
  21 |   });
  22 | });

Answer 1

您可以强制渲染以获取内部结构，即

const agGridReactWrapper = component.find(AgGridReact);

expect(
  agGridReactWrapper.render()
  .find('div.ag-center-cols-viewport')
  .find('div.ag-row')
).toHaveLength(5);

这是在确保栅格已设置之后，请参见https://www.ag-grid.com/javascript-grid-testing-react/。

不幸的是，这没有留下任何在DOM上模拟事件的方法:(