如何使用 React 测试库查找并单击没有文本的按钮？

Question

许多React 测试库示例展示了如何使用getByText查询查找和单击按钮，如下所示：

fireEvent.click(getByText("Create"))

或者

userEvent.click(getByText("Create"))

但是，按钮没有文本而只有 SVG 图标是很常见的，例如 Material UI 的图标按钮或浮动操作按钮。有没有推荐的方法来查询和单击这些按钮？对于上下文，我使用的是配套用户事件库提供的更高级别的事件。

Answer 1

对于图标按钮，添加如下aria-label属性：

<button aria-label='edit'>
  <edit-icon />
</button>

然后在您的测试中，在调用时传递可访问的名称 getByRole()

screen.getByRole('button', {
  name: /edit/i
})

从文档：

该访问名称是简单的情况下等于例如在label一个的 form元素，或的文本内容button，或价值 aria-label属性。

Answer 2

有几种方法可以查询一个元素，没有看到你的元素层次结构，很难说。但是，有多种方法可以查询元素，使用的替代方法getByText()可能是getByRole('button'). 如果要将 a 添加data-testid到元素，可以使用getByTestId(). 这里还有一些可用的查询：https : //testing-library.com/docs/dom-testing-library/api-queries