自从从@testing-library 开始react以来，我对这个name属性感到困惑。可以获取渲染按钮的引用，例如：
// <button>Button text</button>
screen.getbyRole("button", {name: /button text/gi})
在这种情况下，名称指textNode的是按钮的内部。围绕输入的故事是类似的，name可以参考例如idthename或 text 内容。
我目前正在尝试获取像这样呈现的按钮的引用：
<button
aria-label="Close"
class="css-1dliicy"
type="button"
>
Create new
<svg>...</svg>
</button>
并且无法通过查询找到按钮：
const createNewButton = screen.getByRole('button', {
name: /Create new/gi,
});
我显然似乎不知道该name属性的含义，但我似乎无法找到有关它的文档。
这里的问题是第一个按钮没有 aria-label，并且默认情况下将回退到使用按钮内容以实现可访问性。
由于第二个按钮具有Closearia-label，因此name本例中的属性应为Close.
我编写了以下测试来证明这一点。
import {render} from "@testing-library/react";
describe('test', () => {
it('find by name -> aria-label', () => {
const {getByRole} = render(<button
aria-label="Close"
className="css-1dliicy"
type="button"
>
Create new
</button>)
const button = getByRole('button', {name: 'Close'});
expect(button).toBeTruthy();
})
it('find by name -> button content', () => {
const {getByRole} = render(
<button>button text</button>
);
const button = getByRole("button", {name: /button text/gi});
expect(button).toBeTruthy();
})
it('will throw an error', () => {
const {getByRole} = render(
<button>button text</button>
);
/** will throw this error:
* Unable to find an accessible element with the role "button" and name `/button texat/gi`
* Here are the accessible roles:
*
* button:
*
* Name "button text":
*/
const button = getByRole("button", {name: /button texta/gi});
expect(button).toBeTruthy();
})
});该name属性是指您尝试查询的元素的可访问名称。
从ByRole查询文档（第三段）：
您可以通过可访问的名称查询返回的元素。可访问名称适用于简单的情况，例如表单元素的标签、按钮的文本内容或
aria-label属性的值 。如果呈现的内容中存在多个具有相同角色的元素，则它可用于查询特定元素。
正如@Moistbobo 所提到的，由于您的按钮具有aria-label="Close"，那么Close将是其可访问的名称。