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

问题描述

我很抱歉，如果这是一个重复的问题.我在其他任何地方都找不到答案.

My apologies If this is a duplicate question. I couldn't find an answer anywhere else.

组件:

<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"

这里是codeandbox链接，用于重现此内容: https://codesandbox.io/s/wandering-browser-mrf78?file =/src/App.test.js

Here's the codesandbox link to reproduce this:https://codesandbox.io/s/wandering-browser-mrf78?file=/src/App.test.js

即使显示错误消息说无法找到，它仍然提示我li&ul标签作为可用角色.

Even though it shows error saying unable to find, it still suggests me li & ul tags as the available roles.

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

  Name "":
  <ul />

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

  Name "":
  <li />

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

Could someone please explain what am I missing here?I tried using regex matchers but no luck.

推荐答案

作者按照规范( https://www.w3.org/TR/wai-aria-1.2/#listitem ).

作者姓名定义为

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

这并不意味着您应该给它加上一个aria标签.仅当您发现辅助技术存在问题时，才应添加aria属性.

That does not mean you should give it an aria-label. You should only add aria attributes if you have identified an issue with assistive technology.

对于您的特定查询，我建议 getAllByRole('listitem').filter(listitem => listitem.textContent ==='待处理任务').

For your specific query I'd suggest getAllByRole('listitem').filter(listitem => listitem.textContent === 'Pending task').

这篇关于无法在具有特定名称的列表项上使用getByRole-RTL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！