基于li >a测试库的文本的getByRole
基于li >a测试库的文本的getByRole
提问于 2021-08-29 01:41:18
我想使用getByRole编写测试，我有如下所示的html。当我使用linkitem或“链接”作为角色时。我找不到元素
// err
TestingLibraryElementError: Unable to find an accessible element with the role "listitem" and name "Click Me"
Here are the accessible roles:
--------------------------------------------------
list:
Name "":
<ul
class="bar-dropdownList"
/>
--------------------------------------------------
listitem:
Name "":
<li
class="bar-container"
/>
Name "":
<li
class="bar-actionContainer"
/>
--------------------------------------------------
// test.tsx
const name = screen.getByRole('listitem', {name: 'Click Me'});
// from screen.debug()
<ul class="bar-dropdownList">
<li class="bar-container">
<div>
<a class="bar-button">
<span class="bar-label">Click Me</span>
</a>
</div>
<div>
<a class="bar-button">
<span class="bar-label">Address</span>
</a>
</div>
</li>
</ul>回答 1
Stack Overflow用户
发布于 2021-08-29 04:30:16
问题是，如果没有role="link"，React将不会将锚点识别为href。您可以使用RTL的测试游乐场来测试这个 --如果您试图通过link角色进行查询，您将得到一个返回的节点，但是如果删除href，它将什么也不返回。您还将注意到，如果删除href，然后尝试通过键盘上的选项卡导航文档，那么锚元素将被跳过，永远不会收到焦点。这很可能是RTL做出这种区分的原因:从可访问性的角度看，浏览器对没有href的锚点的处理方式是不同的。RTL对于它用来匹配可访问角色的规则很在行，所以如果是我，我会错误地假设没有href的锚点代表可访问性反模式，并重新评估它是如何构建的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68969275
复制相关文章
相似问题
腾讯云开发者
