使用 materialUI 测试 className

Question

所以我正在尝试测试我的组件是否有 class。问题是，它是使用 MaterialUI 生成的。因此，当我尝试检查我的组件是否具有 spinningIconCenter 的 class 时，测试失败，因为 class 是：makeStyles-spinningIconCenter-9。我该如何测试？

我基本上试过了。但我知道这种方法是错误的，因为它比较了整个 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");
});

现在我明白我需要这样做了：

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

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

问题是我不知道结局是什么。我该如何处理？

Answer 1

好的，你需要这样做：

  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);
  });

使用 materialUI 测试 className

Testing className with materialUI

javascript

typescript

reactjs

material-ui

react-testing-library