reactjs - 查询带有特定文本的按钮

Question

我有一个(笑话)测试，以确定是否存在按钮:

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

该测试是因为组件中同时存在一个按钮和标题为“免费注册”的文本。

可以将 testid添加到按钮中，但是我更喜欢遵循 react-testing-library 模拟用户行为的原则。
我认为用户希望“单击标记为“免费注册”的按钮”是合法的。在这种情况下，指定HTML元素的类型很有意义，因为 <button />是用户的独特元素，而不是 <h2 />与 <h3 />。
如何查询标记为“免费注册”的按钮元素？例如，可以通过查询选择器进一步限制getByText()吗？

Answer 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
})