Query a button with specific text

user_1414008 0
Viewed 30467

I have a (Jest) test to determine if a button exists:

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

This test because there is both a button AND heading with "Sign up for free" text in the component.

Screenshot showing both a heading and button with "Sign up for free" text

A testid could be added to the button, but I'd prefer to follow the react-testing-library principle of simulating user behaviour.

I feel it's legitimate a user would want to "click the button labelled 'Sign up for free'". In this situation, specifying the type of HTML element makes sense as a <button /> is a distinctive element to the user, as opposed to be <h2 /> vs <h3 />.

How can I query for a button element labelled "Sign up for free"? For example can getByText() be further limited by a query selector?

react-testing-library jestjs reactjs
4 Answers

I'm surprised no one here gives the most idiomatic answer yet. You can use getByRole() and pass an accessible name. The accessible name is the text of the button or the value of aria-label attribute.

It can be used to query a specific element if multiple elements with the same role are presented on the screen.

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

You can pass options to your query to change its default behavior:

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

You can find the full documentation here

user_10479030

You can do it like this:

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

You can read more about closest from here

user_79098570

If your query returns multiple html elements, you can also use:

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

This will return an array of elements that match the query. Then if you know which element you need, you can access like this:nodes[1]

You can add the word 'All' to the different selectors to get an array of all matching queries (getAllByRole, queryAllByText, etc.)

user_166918640
Related