查询具有特定文本的按钮

Question

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

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

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

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

我觉得用户想要“单击标有 'Sign up for free' 的按钮”是合法的。在这种情况下，指定 HTML 元素的类型是有意义的，因为 <button /> 对用户来说是一个独特的元素，而不是 <h2 /> vs <h3 />.

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

Answer 1

你可以这样做：

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

您可以从 here

阅读更多关于 closest 的信息

Answer 2

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

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

您可以找到完整的文档here

Answer 3

我很惊讶这里没有人给出最地道的答案。您可以使用 getByRole() and pass an accessible name。可访问的名称是按钮的文本或 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 4

如果您查询 return 多个 html 元素，您还可以使用：

const elements = getAllByText('Sign up for free');

这将 return 一个与查询匹配的元素数组。然后如果你知道你需要哪个元素，你可以这样访问：nodes[1]

您可以将单词 'All' 添加到不同的选择器，以获取所有匹配查询（getAllByRole、queryAllByText 等）的数组

Query a button with specific text