如何使用 testing-library 测试 ag-grid 中的内容? [英] How can I test the content in ag-grid using testing-library?

问题描述

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

I am trying to write a few simple tests that the headers and data I want to render are showing up as expected. I created a repo - https://github.com/olore/ag-grid-testing-library to reproduce. The table looks as I would expect when opened in a browser.

<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 列标题和数据是可访问的，但其他列均未呈现，正如我在 testing-library 的输出中所见.我正在使用其他帖子推荐的 --env=jsdom-fourteen.

Locally, the first 2 column headers and data are accessible, but none of the other columns are rendered, as I can see in the output of testing-library. I am using --env=jsdom-fourteen as recommended by other posts.

奇怪的是，当在这个 repo 的代码和框中时，没有为测试呈现标题或数据，与本地一样，浏览器看起来是正确的.https://codesandbox.io/s/gallant-framework-e54c7.然后我尝试等待 gridReadyhttps://codesandbox.io/s/intelligent-minsky-wl17y，但它没有任何区别.

Strangely enough, no headers or data are rendered for the tests when in the codesandbox for this repo, as with local, the browser looks correct. https://codesandbox.io/s/gallant-framework-e54c7. I then tried waiting for gridReady https://codesandbox.io/s/intelligent-minsky-wl17y, but it didn't make a difference.

还尝试直接在 onGridReady 中调用函数，同样的问题(前 2 列通过，第二个 2 列失败)

Also tried directly calling a function in onGridReady, same problem (first 2 columns pass, second 2 fail)

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

推荐答案

ag-grid 使用 列虚拟化，所以这里的解决方案似乎是通过 元素上的 suppressColumnVirtualisation 属性禁用它.

ag-grid uses Column Virtualisation, so it seems the solution here is to disable it via the suppressColumnVirtualisation attribute on the <AgGridReact> element.

  <AgGridReact
        suppressColumnVirtualisation={true}
        ...

轰！全部测试通过！

实际上，只在测试期间抑制它可能是理想的:

In reality, it's probably ideal to only suppress this during testing:

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

这篇关于如何使用 testing-library 测试 ag-grid 中的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！