查询带有特定文本的按钮

Question

我有一个（Jest）测试来确定按钮是否存在：

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

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

Atestid可以添加到按钮，但我更愿意遵循模拟用户行为的反应测试库原则。

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

如何查询标记为“免费注册”的按钮元素？例如可以getByText()进一步限制查询选择器？

Answer 1

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

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

文本按钮

<button>Text Button</button>

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

图标按钮

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

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

Answer 2

你可以这样做：

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

您可以closest从这里阅读更多信息

Answer 3

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

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

您可以在此处找到完整的文档