我正在尝试编写一些简单的测试,以使我要呈现的标头和数据按预期显示。我创建了一个 repo - https://github.com/olore/ag-grid-testing-library来重现。该表在浏览器中打开时看起来与我预期的一样。
<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
按照其他帖子的建议使用。
奇怪的是,当在此 repo 的代码和框中时,没有为测试呈现标题或数据,与本地一样,浏览器看起来是正确的。
https://codesandbox.io/s/gallant-framework-e54c7。然后我尝试等待gridReady
https://codesandbox.io/s/intelligent-minsky-wl17y,但没有任何区别。
编辑:还尝试在 onGridReady 中直接调用函数,同样的问题(前 2 列通过,第二列失败)
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}/>);
});