Easy GetAllByRole example

If you’re using React Testing Library and want to test multiple instances of an element but aren’t sure how, stop your searching, you found what you’re looking for. Recently, I was working on a test in which all of my buttons had aria attributes other than role that I wanted to include in my test. The getByRole wasn’t testing all of my buttons, just the first one. The RTL documentation shows that there is the perfect method to use here (getAllByRole), but doesn’t show us how to use it. That’s why I’m giving you a much needed, getAllByRole example to help you on your way.

Estimated reading time: 3 minutes

In this article, I’ve created a component with several checkboxes. Obviously they all are input type checkbox so therefor have the same role. Note that we are using Typescript in this example code but we aren’t really using interfaces or anything. Mostly, all we’re changing is .jsx extensions to .tsx.

The component code

The component is in its own folder titled Checkboxes and the file name is Checkboxes.tsx. Below is the component I’ll be testing in full:

import React from 'react'


const Checkboxes: React.FC = () => {

    return (
        <>
        <label htmlFor='first-input'>
        <input id="first-input" type="checkbox" />
        Cookies
        </label>
        <label htmlFor='second-input'>
        <input id="second-input" type="checkbox" />
        Cake
        </label>
        <label htmlFor='third-input'>
        <input id="third-input" type="checkbox" />
        Chips
        </label>
        <label htmlFor='fourth-input'>
        <input id="fourth-input" type="checkbox" />
        Coke
        </label>
        </>
    )
}
export default Checkboxes

This simple code example isn’t like a real world example because we aren’t using props or state or functions on this checkbox which means it’s great example code, but not so great for the real world.

Want to learn what the difference between props and Context are and when to use them? Check out this article on context vs props.

Setting up the Jest test

To set up the jest test, we’ll create the file Chechboxes.unit.test.tsx in the Checkboxes folder. We’ll import the following, (React, render and screen utils from testing library, and our Checkboxes component).

import React from 'react'
import { render, screen } from '@testing-library/react'

import Checkboxes from './Checkboxes'

Next we’ll scaffold our test suite with a describe and it block and render our component:

describe('Checkboxes', () => {
    it('tests that all of the checkboxes are in the document', () => {
        render(<Checkboxes />)
    })
})

Need help testing state in your jest test? Check out this article on how to test UseState in react.

How to getAllByRole in a jest test

Below I’m using a forEach method to loop through the node list that getAllByRole returns. Note that getAllByRole is very similar to querySelectorAll and we can treat it the same way.

        const checkboxes = screen.getAllByRole('checkbox')
        checkboxes.forEach(checkbox => expect(checkbox).toBeInTheDocument())

The full getAllByRole example

import React from 'react'
import { render, screen } from '@testing-library/react'

import Checkboxes from './Checkboxes'

describe('Checkboxes', () => {
    it('tests that all of the checkboxes are in the document', () => {
        render(<Checkboxes />)
        const checkboxes = screen.getAllByRole('checkbox')
        checkboxes.forEach(checkbox => expect(checkbox).toBeInTheDocument())
    })
})

Now if I wanted to check to make sure that each component had a label, I could write a test using queryAllByLableText like this below. Note that I am using queryBy because I am testing that something might not be there. Also note that I am testing for an empty label string.

    it('tests that each checkbox has a label', () => {
        render(<Checkboxes />)
        const checkboxLabels = screen.queryAllByLabelText("")
        checkboxLabels.forEach(emptyLabel => expect(emptyLabel).not.toBeInTheDocument())
    })

Conclusion

And that’s it! We learned how to use getAllByRole and similar methods in our Jest and RTL tests. Hopefully this helps you get your job done more easily.

Photo by Ferenc Almasi on Unsplash