React Testing Library：含文本的alert为何无法通过name匹配找到？

元素内容是否属于Accessible Name？ #

大部分HTML元素的内部文本会被算作其accessible name，但ARIA role="alert"的元素是例外。

对于alert这类通知型角色，屏幕阅读器会读取它的内容，但这些内容属于元素的「accessible description」（描述），而非「accessible name」（名称）。也就是说，这个alert的accessible name实际上是空的，它的文本内容不会被识别为name属性值。

为什么测试找不到目标alert？ #

你用screen.findByRole("alert", { name: /Please wait/i })查找元素时，是在匹配accessible name符合正则的alert，但这个alert的accessible name并不是"Please wait"，自然匹配失败。

另外，你的组件里alert是初始渲染就存在的，不需要用异步的findByRole，用同步的getByRole更合适。

修复测试的两种方法 #

方法1：直接断言alert的文本内容 #

不用通过name匹配，先找到alert元素，再检查它的文本：

test("renders alert", () => {
  render(<Counter />);
  const loadingScreen = screen.getByRole("alert");
  expect(loadingScreen).toHaveTextContent(/Please wait/i);
});

方法2：给alert设置明确的Accessible Name #

如果一定要用name参数匹配，可以通过aria-label给alert指定accessible name：

// 修改组件中的alert元素
<div role="alert" aria-label="Please wait">Please wait</div>

// 测试代码（此时name匹配生效）
test("renders alert", () => {
  render(<Counter />);
  const loadingScreen = screen.getByRole("alert", { name: /Please wait/i });
  expect(loadingScreen).toBeInTheDocument();
});

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