自从使用@Testing-Library for Reaction开始,我就被name
属性搞糊涂了。可以获得呈现的按钮的引用,例如:
// <button>Button text</button>
screen.getbyRole("button", {name: /button text/gi})
在本例中,名称指的是按钮内部的textNode
。关于输入的情况类似,name
可以指id
name
或文本内容。
我当前正在尝试获取按如下方式呈现的按钮的引用:
<button
aria-label="Close"
class="css-1dliicy"
type="button"
>
Create new
<svg>...</svg>
</button>
并且通过查询找不到该按钮:
const createNewButton = screen.getByRole('button', {
name: /Create new/gi,
});
我显然不知道name
属性是什么意思,但我似乎找不到有关它的文档。
name
属性引用您尝试查询的元素的可访问名称。
来自ByRole
query docs(第三段):
您可以通过accessible name查询返回的元素。这个
可访问名称用于简单的大小写,例如表单的标签
元素、按钮的文本内容或
aria-label
属性。如果满足以下条件,则可以使用它来查询特定元素
具有相同角色的多个元素出现在渲染的
内容。
作为@Moistbobo referred to,由于您的按钮具有aria-label="Close"
,则Close
将是其可访问名称。