react-testing-library 不会呈现 VirtualTable 的所有部分

Question

上面的 CodeSandbox 包含一个显示问题的小代码段。呈现的 table 包含一些数据。左侧的所有内容都已渲染，围绕中心，@testing-library/react 停止渲染任何内容。

在视觉上，一切都很好。但是 @testing-library/react 渲染的 HTML 错过了 table 的整个右半部分。

如果您硬重新加载其中包含 CodeSandbox 的选项卡，然后导航到 "Browser" 选项卡，您甚至可以看到这一点。右半部分将丢失。单击 CodeSandbox 中的浏览器刷新按钮，一切都会正常呈现。

没有VirtualTable，一切都完美呈现。但是，出于性能原因，我需要 VirtualTable。

以编程方式扩展视口没有帮助。

// setupTests.js
global.resizeWindow = (x, y) => {
    window.innerWidth = x
    window.innerHeight = y
    window.dispatchEvent(new Event('resize'))
}

// In the test
global.resizeWindow(4096, 2160)
// Same result, no change

有什么方法可以保持 VirtualTable 的优势，同时仍然运行测试 table 右侧包含的数据？

Answer 1

这是 DevExpress 的回复：

Hi,

Thank you for your sample. I have discussed this behavior with our developers and we concluded that this is the expected behavior. The VirtualTable plugin renders only visual parts of the Grid control. So, we recommend that you use the Table plugin for tests and the VirtualTable plugin in a real application.

Thanks, Alessandro

所以看起来，由于我们没有真正的浏览器，VirtualTable 认为不需要渲染任何东西。

解决方案是在测试场景中渲染常规 Table，在真实场景中渲染虚拟Table。

function areWeTestingWithJest() {
    return process.env.JEST_WORKER_ID !== undefined;
}

但是，在生产代码中使用测试代码通常被认为是不好的做法，所以我将避免测试 VirtualTables，而是在其他地方测试数据。

react-testing-library 不会呈现 VirtualTable 的所有部分

react-testing-library doesn't render all parts of a VirtualTable

devexpress

reactjs

react-testing-library