Testing className with materialUI

user_7055769 0
Viewed 763

So I'm trying to test if my component has a class. The problem is, it's generated using MaterialUI. So when I try to check if my component has a class of spinningIconCenter, the test fails because the class is: makeStyles-spinningIconCenter-9. How can I test this?

I essentially tried this. But I understand that this approach is wrong, since it compares the entire class.

const createComponent = (text?: string, center?: boolean) => {
  component = render(<Component text={text} center={center} />);
};

it('should render icon with center class name', () => {
  createComponent('Some test text', true);

  const iconClassName = component.getByTestId("spinningIcon");
  expect(iconClassName).toHaveClass("spinningIconCenter");
});

Now I see I need to do it like this:

it('should render icon with center class name', () => {
  createComponent('Some test text', true);

  expect(iconClassName.classList.contains('makeStyles-spinningIconCenter-9')).toEqual(true);
});

The problem is that I have no clue what the ending will be. How do I handle this?

material-ui react-testing-library typescript reactjs javascript
1 Answers

Ok, you need to do it like this:

  it('should render icon with center class name', () => {
    createComponent('Some test text', true);

    const iconClassName = component.getByTestId('spinningIcon');

    expect(iconClassName.classList.value.includes('spinningIconCenter')).toEqual(true);
  });
user_70557690
Related