reactjs - 无法在具有特定名称的列表项上使用 getByRole - RTL

Question

如果这是一个重复的问题，我深表歉意。我在其他任何地方都找不到答案。

零件：

<ul>
  <li>Pending tasks</li>
</ul>

测试代码：

expect(getByRole("listitem", { name: "Pending tasks" })).toBeInTheDocument();

错误：

TestingLibraryElementError: Unable to find an accessible element with the role "listitem" and name "Pending tasks"

这是重现此内容的代码框链接： https ://codesandbox.io/s/wandering-browser-mrf78?file=/src/App.test.js

即使它显示错误提示无法找到，它仍然建议我将 li & ul 标签作为可用角色。

Here are the accessible roles:
 --------------------------------------------------
  list:

  Name "":
  <ul />

  --------------------------------------------------
  listitem:

  Name "":
  <li />

有人可以解释一下我在这里缺少什么吗？我尝试使用正则表达式匹配器，但没有运气。

Answer 1

Alistitem由作者按规范 ( https://www.w3.org/TR/wai-aria-1.2/#listitem ) 命名。

作者姓名定义为

作者：名称来自作者在显式标记特征中提供的值，例如 aria-label 属性、aria-labelledby 属性或宿主语言标记机制，例如 HTML 中的 alt 或 title 属性，其中 HTML 标题属性具有指定文本替代的最低优先级。

-- https://www.w3.org/TR/wai-aria-1.2/#namecalculation

这并不意味着你应该给它一个 aria-label。如果您发现辅助技术存在问题，则应仅添加 aria 属性。

对于您的具体查询，我建议getAllByRole('listitem').find(listitem => listitem.textContent === 'Pending task')。