Reactjs Aria hidden不会对查询隐藏元素

为什么RTL将隐藏元素显示为可见

expect(screen.queryByText(/months in operation\?/i)).not.toBeVisible()

接收的元素可见：

预期文档不包含元素，是否在运行中发现个月？相反

此标签的父div也具有显示样式：无；可见性：隐藏；身高：0

---

这是预期的行为吗？

TL；DR:属性

aria hidden

只会在

*ByRole

查询中隐藏元素

让我们假设下面的组件有两个按钮

const TestComponent=（）=>{
返回(
隐藏按钮
Aria隐藏按钮
);
};

尽管第一个元素由于父元素的样式而不可见，第二个元素被排除在带有

aria hidden

的可访问性树之外，但它们都可以通过

getByText

查询访问，因为它们都存在于DOM中

//两个断言都将被传递
expect（screen.getByText（“隐藏按钮”））.toBeInTheDocument（）；
expect（screen.getByText（“Aria隐藏按钮”）.toBeInTheDocument（）；

但是，尝试使用

getByRole

查询访问它们是不可能的，因为该查询会查找可访问性树-除非在查询中传递了

hidden

选项

//将找不到元素
const[hiddenButton，visibleButton]=screen.getAllByRole（“按钮”）
//将返回两个元素
const[hiddenButton，visibleButton]=screen.getAllByRole（“按钮”，{hidden:true}）

就可见性而言，第二个按钮可见，而第一个按钮不可见

//两个断言都将被传递
const[hiddenButton，visibleButton]=screen.getAllByRole（“按钮”，{hidden:true}）
expect（hiddenButton）.not.tobevible（）；
expect（visibleButton）.tobevicible（）；

非常好，谢谢！我想你不能用这种方式测试没有角色（比如div）的部分的可见性……除非你向元素添加一个显式的角色。

expect(screen.queryByText(/months in operation \?/i)).not.toBeInTheDocument()