我有一个(笑话)测试,以确定是否存在按钮:
it('renders a signup button', () => {
expect(sut.getByText('Sign up for free')).toBeDefined()
})
该测试是因为组件中同时存在一个按钮和标题为“免费注册”的文本。可以将
testid
添加到按钮中,但是我更喜欢遵循 react-testing-library 模拟用户行为的原则。我认为用户希望“单击标记为“免费注册”的按钮”是合法的。在这种情况下,指定HTML元素的类型很有意义,因为
<button />
是用户的独特元素,而不是<h2 />
与<h3 />
。如何查询标记为“免费注册”的按钮元素?例如,可以通过查询选择器进一步限制
getByText()
吗?
最佳答案
我很惊讶这里没有人提供最惯用的答案。您可以使用 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
})
关于reactjs - 查询带有特定文本的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58408178/