使用Jest编写测试用例时无法获取mui-datagrid指定列元素

问题根因 #

MUI DataGrid 渲染单元格时，默认不会将对应列的表头文本设置为单元格的 accessible description，因此调用getAllByRole('cell', { description: /CSA NAME/i })无法匹配到目标元素，属于组件默认渲染逻辑和查询参数不匹配的问题。

可用实现方案 #

• 方案1：通过列头定位列标识，筛选对应单元格
  不需要修改业务代码，直接在测试逻辑中先定位目标列头，拿到列对应的唯一field标识，再筛选同field的单元格即可：

  // 定位CSA NAME列头
  const csaNameHeader = screen.getByRole('columnheader', { name: /CSA NAME/i });
  // 获取列头绑定的data-field属性，该属性会同步到该列所有单元格上
  const targetField = csaNameHeader.getAttribute('data-field');
  // 筛选出所有属于该列的单元格
  const csaNameCells = screen.getAllByRole('cell').filter(
    cell => cell.getAttribute('data-field') === targetField
  );
  

• 方案2：直接通过属性选择器获取
  如果明确知道CSA NAME列在列配置中设置的field值（比如配置时写的是csaName），可以直接通过DOM属性选择器快速获取：

  const csaNameCells = document.querySelectorAll('[role="cell"][data-field="csaName"]');
  

• 方案3：适配可访问性查询规则
  如果希望严格遵循Testing Library的可访问性查询规范，可以在业务代码的列配置中，给CSA NAME列的单元格统一添加带列名的aria-label属性，测试时就可以直接通过name参数匹配：

  // 业务代码中的列配置
  const columns = [
    {
      field: 'csaName',
      headerName: 'CSA NAME',
      renderCell: (params) => (
        <div aria-label={`CSA NAME ${params.value}`}>{params.value}</div>
      )
    },
    {
      field: 'startDate',
      headerName: 'START DATE'
    }
  ]
  
  // 测试代码中可直接查询
  const csaNameCells = screen.getAllByRole('cell', { name: /CSA NAME/i });
  

注意：MUI DataGrid默认没有建立单元格和对应列头的aria-describedby关联，因此description查询参数对默认渲染的单元格不生效，不要使用该参数匹配默认渲染的单元格。

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