如何针对特定Material-UI SpeedDialAction编写测试用例？

假设你用React Testing Library（推荐搭配Material-UI做组件测试），可以按以下步骤操作：

1. 准备测试数据并渲染组件 #

先构造包含目标操作的actions数组，确保目标Action的show为true（因为组件里做了过滤逻辑），然后渲染你的SpeedDial组件：

import { render, screen, fireEvent } from '@testing-library/react';
import YourSpeedDialComponent from './你的组件路径';

// 给目标操作的点击事件做mock
const mockTargetClick = jest.fn();

test('触发指定SpeedDialAction的点击事件', () => {
  const testActions = [
    { name: '编辑', show: true, icon: <EditIcon />, handleClick: mockTargetClick },
    { name: '删除', show: true, icon: <DeleteIcon />, handleClick: jest.fn() },
    // 其他测试用操作项
  ];

  render(<YourSpeedDialComponent actions={testActions} />);

2. 打开SpeedDial菜单 #

SpeedDial默认是收起状态，得先点击触发按钮展开菜单：

// 通过aria-label定位触发按钮（对应你组件里的aria-label属性）
const speedDialTrigger = screen.getByLabelText('Additional Action');
fireEvent.click(speedDialTrigger);

3. 定位并触发目标Action #

可以通过操作项的tooltipTitle（也就是action.name）来精准定位，Material-UI会把这个值作为元素的aria-label：

// 定位目标操作项
const targetAction = screen.getByLabelText('编辑');
// 如果需要更精准，也可以给SpeedDialAction加data-testid属性，比如data-testid="edit-action"，然后用screen.getByTestId('edit-action')定位

// 触发点击事件
fireEvent.click(targetAction);

// 验证点击事件是否被触发
expect(mockTargetClick).toHaveBeenCalledTimes(1);
});

额外注意点 #

• 先修正组件代码里的拼写错误：arialabel要改成aria-label，icon{<speedDialIcon.../>}要改成icon={<SpeedDialIcon openIcon={<EditIcon/>}/>}，这些错误会导致组件渲染异常，影响测试。
• 如果操作项的图标是自定义组件，建议给SpeedDialAction添加data-testid属性，避免因图标识别问题导致定位失败。

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