React中Material UI按钮组件标题单元测试失败求助

你的测试失败核心原因是渲染Button组件时没有提供可被测试识别的按钮名称。Testing Library中getByRole('button', {name: ...})里的name指的是按钮的可访问名称，它通常来自以下几种途径：按钮的文本内容、aria-label属性、aria-labelledby关联的元素。

你的代码里只渲染了<Button/>空组件，没有任何文本或可访问标识，所以测试无法匹配到目标按钮。

修正步骤 #

1. 替换正确的render方法 #

你当前导入的render来自react-dom，但测试React组件应该使用@testing-library/react提供的render，它会自动处理测试后的DOM清理，更适配测试场景：

import { render, screen } from '@testing-library/react';

2. 给Button添加可识别的名称 #

根据你的测试预期，有两种常见的修正方式：

方式一：按钮包含可见文本

如果按钮显示"Create User"文本，直接把文本作为Button的子元素传入：

test("display button title", () => {
  render(<Button>Create User</Button>);
  const button = screen.getByRole('button', { name: /create user/i });
  expect(button).toBeInTheDocument();
});

方式二：按钮无可见文本（如仅图标）

如果按钮是图标按钮或没有可见文本，需要通过aria-label指定可访问名称：

test("display button title", () => {
  render(<Button aria-label="Create User">+</Button>);
  const button = screen.getByRole('button', { name: /create user/i });
  expect(button).toBeInTheDocument();
});

验证逻辑 #

修改后，Testing Library就能通过按钮的文本或aria-label匹配到对应的按钮元素，测试即可通过。

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