React-testing-library 中的 name 选项是什么？

Question

自从使用 @testing-library 进行反应以来，我对这个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属性的含义，但我似乎找不到有关它的文档。

Answer 1

该name属性是指您尝试查询的元素的可访问名称。

来自ByRole查询文档（第三段）：

您可以通过可访问的名称查询返回的元素。对于简单情况，可访问名称等于表单元素的标签、按钮的文本内容或属性的值 aria-label。如果呈现的内容上存在具有相同角色的多个元素，则它可用于查询特定元素。

正如@Moistbobo 所提到的，由于您的按钮有aria-label="Close"，那么Close将是其可访问的名称。