Question

使用Ag-Grid时，最好将DOM元素定位为点击测试（例如，在设置点击处理程序时，要定位第二行，模拟点击并监视结果）动作）。

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

我在这里（this SO answer）创建了一个简单的CodePen，它具有通过测试和失败测试-但是，我似乎无法识别基础网格内容。

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);
  });
});

我希望有2个成功的测试-相反，调试会打印：

<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上的事件：（

如何在酶中添加实际含量的ag-grid？

1 个答案: