如何使用 testing-library 测试 ag-grid 中的内容？

Question

我正在尝试编写一些简单的测试，以确保 headers 和我想要呈现的数据按预期显示。我创建了一个 repo - https://github.com/olore/ag-grid-testing-library 来重现。 table 在浏览器中打开时看起来与我预期的一样。

<AgGridReact
  columnDefs={ /* First 2 always findable, others never */
  [
    { field: "make" }, 
    { field: "model" }, 
    { field: "price" }, 
    { field: "color" },
  ]}
  rowData={
  [{ 
    make: "Toyota", 
    model: "Celica",
    price: "35000", 
    color: "blue" 
    }]
  }
  pagination={true}></AgGridReact>

和测试

test('renders all the headers', async () => {
  const { getByText } = render(<GridExample />);
  expect(getByText("Make")).toBeInTheDocument();  // PASS
  expect(getByText("Model")).toBeInTheDocument(); // PASS
  expect(getByText("Price")).toBeInTheDocument(); // FAIL
  expect(getByText("Color")).toBeInTheDocument(); // FAIL
});

在本地，前 2 列 headers 和数据是可访问的，但呈现其他列的 none，正如我在 testing-library 的输出中看到的那样。我正在按照其他帖子的推荐使用 --env=jsdom-fourteen。

奇怪的是，当在这个 repo 的 codesandbox 中时，没有 headers 或数据呈现用于测试，与本地一样，浏览器看起来是正确的。 https://codesandbox.io/s/gallant-framework-e54c7。然后我试着等待 gridReady https://codesandbox.io/s/intelligent-minsky-wl17y，但并没有什么不同。

编辑：还尝试直接调用 onGridReady 中的函数，同样的问题（前两列通过，第二列失败）

test('renders all the headers', async (done) => {
  let page;

  const onReady = () => {
    expect(page.getByText("Make")).toBeInTheDocument();  // PASS
    expect(page.getByText("Model")).toBeInTheDocument(); // PASS
    expect(page.getByText("Price")).toBeInTheDocument(); // FAIL
    expect(page.getByText("Color")).toBeInTheDocument(); // FAIL
    done();
  }
  page = render(<GridExample ready={onReady}/>);
});

Answer 1

ag-grid 使用 Column Virtualisation，所以这里的解决方案似乎是通过 <AgGridReact> 元素上的 suppressColumnVirtualisation 属性禁用它。

  <AgGridReact
        suppressColumnVirtualisation={true}
        ...

轰！所有测试都通过了！

实际上，最好只在测试期间抑制它：

        suppressColumnVirtualisation={process.env.NODE_ENV === "test"}

Answer 2

@olore 回答的补充。

如果您使用服务器端数据源，请确保

您的模拟服务器响应预期数据，而不是错误。
您在测试库中使用了异步选择器，至少对于行的第一个单元格。

expect(await findByText('Price')).toBeInTheDocument();

如何使用 testing-library 测试 ag-grid 中的内容？

How can I test the content in ag-grid using testing-library?

ag-grid

ag-grid-react

react-testing-library

testing-library