Material UI DataGridPro行未渲染问题求助（Playwright测试场景）

以下是针对你遇到的DataGridPro行数据存在但未渲染问题的排查方向和解决方案：

1. 修复单元格渲染逻辑中的潜在问题 #

你的renderCell代码存在几个可能导致渲染异常的点：

• 索引类型错误：index被声明为Number（对象类型），在拼接key时会产生异常字符串（如rowId[object Number]），应改为原始类型number：

  .map((af: ActionFile, index: number) => { // 将Number改为number
  

• 空返回值问题：当af?.file不存在时返回空字符串""，React对字符串和空元素的处理逻辑不同，建议返回null或空Fragment：

  } else {
    return null; // 或 return <></>;
  }
  

• 过滤条件校验：确保ActionFileType.Output在所有环境中都正确定义（无拼写错误、导出正常），避免过滤后无数据导致单元格为空。

2. 优化Playwright测试的等待策略 #

GitLab CI环境的渲染速度可能慢于本地，需确保测试等待表格完全渲染：

• 等待具体单元格内容：不要仅等待表格容器，而是等待单元格内的目标元素出现：

  // 等待第一个包含链接的单元格元素
  await page.waitForSelector('.action_list_element a', { timeout: 15000 });
  

• 等待React渲染完成：使用waitForFunction检查单元格内容是否非空：

  const targetRowId = "your-target-row-id";
  await page.waitForFunction((rowId) => {
    const cell = document.querySelector(`[data-row-id="${rowId}"] .action_list_element`);
    return cell && cell.textContent.trim().length > 0;
  }, targetRowId, { timeout: 15000 });
  

3. 处理虚拟滚动导致的渲染延迟 #

DataGridPro默认启用虚拟滚动，CI环境的小视窗可能导致部分行未渲染：

• 增大测试视窗：在Playwright配置中设置更大的视窗：

  // playwright.config.js
  module.exports = {
    use: {
      viewport: { width: 1920, height: 1080 },
    },
  };
  

• 滚动到目标行：测试时主动滚动到未渲染的行：

  const row = page.locator(`[data-row-id="${targetRowId}"]`);
  await row.scrollIntoViewIfNeeded();
  await row.waitFor({ state: "visible" });
  

• 临时禁用虚拟滚动：在测试环境中关闭虚拟滚动，验证是否为虚拟滚动导致的问题：

  <DataGridPro
    disableVirtualization={process.env.NODE_ENV === "test"}
    // 其他props
  />
  

4. 应对CI环境的资源限制 #

GitLab Runner的资源限制可能导致渲染滞后：

• 增加测试超时时间：延长Playwright的操作超时，给渲染足够时间：

  await page.waitForSelector('.action_list_element', { timeout: 20000 });
  

• 避免并行渲染压力：如果测试中同时渲染多个DataGridPro，可改为串行测试，减少资源竞争。

5. 验证数据加载时机 #

确保DataGridPro在数据完全加载后再渲染：

• 在组件中检查数据状态，仅当数据存在时渲染表格：

  {data.length > 0 ? (
    <DataGridPro rows={data} columns={columns} />
  ) : (
    <div>Loading...</div>
  )}
  

内容的提问来源于stack exchange，提问作者Radu Nicoara