图片获presentation角色致测试失败，是否正常？如何规避手动设role="img"？

我的测试因为图片被赋予presentation角色而失败，这是预期情况吗？另外，我希望避免手动添加<img role="img" ... />这样的代码。

测试代码 #

test('component', () => {
  render(<Component {...defaultProps} />);
  expect(screen.getByRole('img')).toBeInTheDocument();
});

报错信息 #

TestingLibraryElementError: Unable to find an accessible element with
the role "img"

Here are the accessible roles:

  presentation:

  Name "logo":   

      <img
        alt="logo"
        src="https://google.com/images/logo.png"   
     />

这不是预期情况。正常来说，带有非空alt属性的<img>元素会自动被识别为img可访问角色，不会被标记为presentation（装饰性角色）。

可能的原因及解决方法： #

• 检查alt属性是否被意外修改：确认组件渲染时，alt属性的值是否确实是"logo"，有没有被逻辑覆盖为空字符串（alt=""会让浏览器将图片判定为装饰性，赋予presentation角色）。
• 排查组件的额外配置：检查组件代码或使用的第三方库，是否给图片添加了role="presentation"或aria-hidden="true"这类属性，覆盖了浏览器的默认行为。
• 验证defaultProps的正确性：确保测试传入的defaultProps里，alt属性的取值没有被错误覆盖。

优化测试代码的建议 #

既然图片的alt属性是明确的"logo"，可以直接用getByAltText来定位元素，这比通过角色定位更精准，也能避开角色识别的问题：

test('component', () => {
  render(<Component {...defaultProps} />);
  expect(screen.getByAltText('logo')).toBeInTheDocument();
});

内容的提问来源于stack exchange，提问作者marcus-linmarkson