@mui/x-data-grid+RTL+Jest测试异常：表头表体未渲染且空行提示不显示

核心问题 #

你的ListComponent中，DataGrid的columns属性错误地传入了行数据arrayData，而非组件内定义好的tableColumns列配置数组。这会导致表格无法正确渲染列结构，进而无法触发空状态提示逻辑。

修正代码 #

将DataGrid的columns属性改为tableColumns：

<DataGrid
  getRowId={(row: Alert) => row.someId}
  loading={!arrayData}
  columns={tableColumns} // 此处修正为tableColumns
  rows={arrayData || []}
  slots={{
    toolbar: GridToolbar,
  }}
  slotProps={{
    toolbar: {
      showQuickFilter: true,
      quickFilterProps: { debounceMs: 500 },
    },
  }}
  disableRowSelectionOnClick
/>

额外优化建议 #

1. Loading状态严谨性：当前loading={!arrayData}在空数组场景下逻辑成立，但如果arrayData可能为undefined/null，可以调整为：

   loading={!arrayData?.length}
   

2. 测试断言更精准：比起依赖快照，直接断言空状态文本更可靠：

   it("should show 'No rows' when arrayData is empty", async () => {
     renderWithTheme(<ListComponent />);
     expect(screen.getByText('No rows')).toBeInTheDocument();
   });
   

修正后预期效果 #

表格会正确渲染列头，当arrayData为空数组时，表格主体将显示“No rows”提示文本，分页器也会同步显示0–0 of 0的正确状态。

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