Testing library React - expect multiple elements to pass a specified condition

Question

I have multiple buttons in my component and all of them should be disabled.

const buttons = screen.getAllByRole('button');

expect(ALL BUTTONS).toHaveAttribute('disabled'); // I want something like this.

How can we write this in the most convenient way?

Markson

Answer 1

Iterate the buttons array and run the expect for each one

buttons.forEach((button) => {
   expect(button).toHaveAttribute('disabled');
})

Hoop

Answer 2

I used this code in my test:

buttons.forEach((button) =>{
    expect(button).toBeDisabled()
})

or you can write this:

 expect(buttons).toBeDisabled().toHaveLength(2)//here you put number of your buttons

Hawes

The second one is a short and convenient way as well, thank you, sir! – Markson