How to use 'toHaveClass' to match a substring in Jest?

Question

There's an element to which I'm giving a class success. But React-Mui appends a text to it on DoM, say, something like mui-AbcXYZ-success. So when I'm doing this

expect( getByTestId('thirdCheck')).toHaveClass("success")

I don't get this test passing as it expects the complete name mui-AbcXYZ-success. I’m getting this passed only when I provide the exact name (wirh hyphenated text and random number that mui adds)

How do I test that?

I tried doing the following without reasult: expect( getByTestId('thirdCheck')).toHaveClass(/success/)

I also tried applying .className or .classList but that doesn’t give me the list of classes on the element.

Answer 1

After hours of frustrations, this is how I did and if any one has a better solution, feel free to post. I shall accept it.

      let classes = getByTestId('thirdCheck').getAttribute('class'); //returns something like "Mui-root mui-AbcXYZ-success"
        classes=classes.split(' ')[1].split('-'); //first split is to split on the basis of spaces and the second one to do on the bases of hyphen
        expect(classes.includes('success'));

Looks like a bit verbose for a trivial-looing thing. But that's how did.

UPDATE:

@Fyodor has a great point in the comment. We can simply do this as follows:

expect(getByTestId('thirdCheck').getAttribute('class')).toMatch(/success/gi)