查询带有特定文本的按钮

Posted 2023-02-22

【中文标题】查询带有特定文本的按钮

【英文标题】：Query a button with specific text

【发布时间】：2020-02-12 22:21:56

【问题描述】：

我有一个（开玩笑的）测试来确定按钮是否存在：

it('renders a signup button', () => 
  expect(sut.getByText('Sign up for free')).toBeDefined()
)

此测试是因为组件中有一个按钮和带有“免费注册”文本的标题。

testid 可以添加到按钮中，但我更愿意遵循 react-testing-library 模拟用户行为的原则。

我认为用户想要“单击标有‘免费注册’的按钮”是合法的。在这种情况下，指定 html 元素的类型是有意义的，因为 <button /> 对用户来说是一个独特的元素，而不是 <h2 /> 和 <h3 />。

如何查询标有“免费注册”的按钮元素？例如，getByText() 是否可以进一步受到查询选择器的限制？

【参考方案1】：

我很惊讶这里没有人给出最惯用的答案。您可以使用getByRole() 并传递accessible name。可访问的名称是按钮的文本或aria-label 属性的值。

如果屏幕上出现多个具有相同角色的元素，则可用于查询特定元素。

Text button

<button>Text Button</button>

screen.getByRole('button', 
  name: /text button/i
)

Icon button

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

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

【讨论】：

感谢您的回答！ name 属性在我的 React 测试库版本中不存在，所以我必须更新包。以防其他人遇到同样的问题。

【参考方案2】：

您可以将选项传递给查询以更改其默认行为：

getByText('Sign up for free',  selector: 'button' )

你可以找到完整的文档here

【参考方案3】：

你可以这样做：

getByText('Sign up for free').closest('button')

你可以从here阅读更多关于closest的信息

【讨论】：

这仍然会找到多个元素，在react-testing-library >= 7.0 中失败。我只想选择一个元素。