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

Question

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

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

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

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

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

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

标签： reactjsjestjsreact-testing-library

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