无法在具有特定名称的列表项上使用 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"

这里是代码框 link 来重现这个： 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

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

作者姓名定义为

author: name comes from values provided by the author in explicit markup features such as the aria-label attribute, the aria-labelledby attribute, or the host language labeling mechanism, such as the alt or title attributes in HTML, with HTML title attribute having the lowest precedence for specifying a text alternative.

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

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

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

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

Unable to use getByRole on listitem with a specific name - RTL

testing

reactjs

jestjs

react-testing-library

testing-library