使用Jest与React Testing Library测试MaterialTable操作按钮

你测试失败有两个核心原因：

1. 你用getAllByTitle('Add')拿到的根本不是可点击的图标按钮：material-table的操作图标默认套了MUI的Tooltip组件，Tooltip的title提示节点默认是懒渲染的，只有鼠标hover图标时才会挂载到DOM，你查到的是未挂载的Tooltip占位节点，自然过不了toBeInTheDocument断言，点击也不会触发任何交互。
2. 对material-table的新增交互逻辑理解有误：点击Add图标不会直接触发onRowAdd回调，组件逻辑是先弹出空白可编辑行，用户填写完行数据点击保存按钮后，才会调用onRowAdd回传新行数据，少了编辑、保存的步骤自然触发不了handleRowAdd。
   另外你代码里的匹配器存在拼写错误：toHavelength是错误写法，正确写法是toHaveLength，Jest中判断mock调用次数推荐直接用官方提供的toHaveBeenCalledTimes匹配器，不要手动读calls属性判断长度。

元素获取方式 #

不要通过title属性查可交互元素，优先按可访问性角色查询：material-table的操作图标外层是可点击的<button>元素，默认自带和操作名一致的aria-label，直接用getByRole匹配button角色+可访问名称即可，这也是React Testing Library官方推荐的最贴近用户真实使用场景的查询方式。
如果觉得aria-label匹配不稳定，可以在自定义图标配置时给图标加data-testid标记，查询更直接：

const tableIcons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} data-testid="add-row-btn" />),
  // 其余Edit、Delete图标可按相同方式加标记
}

完整测试代码示例 #

import { render, screen, fireEvent } from '@testing-library/react';
import ContentTable from './ContentTable';
// 替换成你项目中handleRowAdd的实际引用路径，保证mock和组件内调用的是同一个实例
const mockHandleRowAdd = jest.fn();
jest.mock('./table-service', () => ({
  handleRowAdd: mockHandleRowAdd
}));

describe('ContentTable新增行功能', () => {
  beforeEach(() => {
    mockHandleRowAdd.mockClear();
  });

  test('点击Add按钮完成编辑后，会调用一次handleRowAdd', () => {
    render(<ContentTable />);
    
    // 方式1：按角色+名称获取Add按钮
    const addButton = screen.getByRole('button', { name: /add/i });
    // 方式2：如果加了testid就用这个：const addButton = screen.getByTestId('add-row-btn');
    
    // 断言按钮已挂载
    expect(addButton).toBeInTheDocument();
    // 点击Add按钮打开编辑态
    fireEvent.click(addButton);

    // 填写新增行的必填表单字段（按你表格的实际列数调整，这里以1列文本输入为例）
    const rowInput = screen.getAllByRole('textbox')[0];
    fireEvent.change(rowInput, { target: { value: '测试新增行数据' } });

    // 找到编辑态的保存按钮（对勾图标，默认aria-label包含save/check）
    const saveButton = screen.getByRole('button', { name: /save|check/i });
    fireEvent.click(saveButton);

    // 断言handleRowAdd被调用1次
    expect(mockHandleRowAdd).toHaveBeenCalledTimes(1);
    // 可选：断言传入的新行数据符合预期
    expect(mockHandleRowAdd).toHaveBeenCalledWith(expect.objectContaining({
      // 对应你刚才填的测试字段值，比如：
      // name: '测试新增行数据'
    }));
  });
});

• 如果你的表格开了分页、虚拟滚动或者权限控制，要确保Add按钮在当前渲染的视图内，否则需要先滚动到对应区域或者切换权限状态再查询元素。
• 不要直接查询SVG图标元素绑定点击事件，SVG本身默认不绑定交互逻辑，点击事件是绑在它外层的button父节点上的，直接点SVG节点可能因为事件冒泡问题导致触发失败。

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