Reaction-Testing-Library中的名称选项是什么？ [英] What is the name option in react-testing-library?

问题描述

自从使用@Testing-Library for Reaction开始，我就被name属性搞糊涂了。可以获得呈现的按钮的引用，例如：

// <button>Button text</button>
screen.getbyRole("button", {name: /button text/gi})

在本例中，名称指的是按钮内部的textNode。关于输入的情况类似，name可以指idname或文本内容。

我当前正在尝试获取按如下方式呈现的按钮的引用：

<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将是其可访问名称。

这篇关于Reaction-Testing-Library中的名称选项是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！