How can I test for multiple classes at once using React Testing Library?

Question

I want to check whether a DOM element has some specific classes or not. I know I can do this:

test('My element has correct classes assigned', () => {
    const myElement = screen.queryByText('This is my element');

    expect(myElement).toHaveClass('class-one');
    expect(myElement).toHaveClass('class-two');
});

I wonder if something like the following is possible too because my code is getting quite repetitive...

test('My element has correct classes assigned', () => {
    const myElement = screen.queryByText('This is my element');

    expect(myElement).toHaveClasses(['class-one', 'class-two']); // pseudo-code
});

ThomasSquall · Accepted Answer · 2022-08-02 12:12:38Z

3

You can easily achieve that by simply passing multiple classes to the toHaveClass method as an array or comma-separated values.

Example with an array:

test('My element has correct classes assigned', () => {
    const myElement = screen.queryByText('This is my element');

    expect(myElement).toHaveClass(['class-one', 'class-two']);
});

Example with comma-separate values:

test('My element has correct classes assigned', () => {
    const myElement = screen.queryByText('This is my element');

    expect(myElement).toHaveClass('class-one', 'class-two');
});

answered Aug 2, 2022 at 12:12

ThomasSquall

7576 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thedude · Accepted Answer · 2022-08-02 12:17:47Z

1

As @ThomasSquall mentioned toHaveClass accepts a list of classnames to test.

A more general approach for this (no matter which API you are using) is to use standard JS constructs in your unit tests.

For example you could do something like this:

['class-one', 'class-two'].forEach(className => {
   expect(myElement).toHaveClass(className)
})

edited Aug 2, 2022 at 12:17

answered Aug 2, 2022 at 12:12

thedude

9,8371 gold badge34 silver badges33 bronze badges

3 Comments

Behemoth Over a year ago

Thanks, but I was hoping for a proper Jest solution not a JS workaround.

thedude Over a year ago

In that case @ThomasSquall's answer is what you are looking for

Behemoth Over a year ago

I know, gonna accept in a second.

Collectives™ on Stack Overflow

How can I test for multiple classes at once using React Testing Library?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related