Vitest无法识别DOM中存在的role=button且带指定aria-label的元素

针对你遇到的getByRole无法找到元素但getByLabelText可以的情况，主要有以下几种可能原因及对应的排查步骤：

1. 可访问名称与aria-label值不一致 #

getByRole的name参数匹配的是元素的可访问名称（Accessible Name），而getByLabelText直接匹配aria-label的原始属性值。尽管aria-label是可访问名称的来源之一，但如果元素同时存在其他内容（比如文本子节点、aria-labelledby关联的元素），可访问名称会是这些内容的组合结果，导致你的正则表达式匹配失败。

排查步骤：
在测试中找到元素后，打印它的可访问名称，确认是否符合预期：

const button = screen.getByLabelText(/open notifications/i);
console.log(getComputedAccessibleName(button));

如果输出包含额外内容（比如未读数open notifications 5），就需要调整正则表达式（比如改成/open notifications/i或者更宽松的匹配），或者检查元素的渲染逻辑是否额外添加了内容到可访问名称中。

2. 测试时机与元素状态同步问题 #

虽然你使用了waitFor，但同步的getByRole可能在元素的可访问名称完全更新前执行。findByRole本身是异步查询，结合await使用能更可靠地等待元素状态稳定。

调整测试代码：

it.only('renders NotificationBadge with fetched notifications', async () => {
  renderWithTheme();

  // 用findByRole替代waitFor + getByRole
  const openNotifications = await screen.findByRole('button', {
    name: /open notifications/i
  });
  expect(openNotifications).toBeInTheDocument();
  
  const unreadBadge = screen.getByLabelText(/unread notifications/i);
  expect(unreadBadge).toBeInTheDocument();

  fireEvent.click(openNotifications);

  expect(await screen.findByText('Notifications')).toBeInTheDocument();
  const notifications = screen.getAllByText(/library for interacting with/i);
  expect(notifications).toHaveLength(8);
});

3. 测试环境的ARIA属性解析问题 #

Vitest依赖jsdom模拟浏览器环境，部分旧版本的jsdom对ARIA属性的解析支持不完善，可能导致可访问名称计算错误。同时，@testing-library/dom的版本也会影响可访问名称的计算逻辑。

排查步骤：

• 更新@testing-library/react、@testing-library/dom和jsdom到最新稳定版本；
• 用screen.debug()打印测试中的DOM结构，确认按钮的role="button"和aria-label属性是否和开发环境一致。

4. 元素嵌套或上下文干扰 #

如果按钮嵌套在其他带有ARIA属性的元素中（比如aria-describedby、aria-labelledby），可能会干扰可访问名称的计算，导致getByRole的name匹配失败。

排查步骤：
通过screen.debug()查看按钮的完整DOM结构，检查是否有其他ARIA属性或父元素影响了可访问名称的生成。

内容的提问来源于stack exchange，提问作者Tomás Benfica