如何使用 'toHaveClass' 来匹配 Jest 中的子字符串？

Question

有一个元素我要给 class success。但是 React-Mui 在 DoM 上附加了一个文本，比如 mui-AbcXYZ-success。所以当我这样做时

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

我没有通过这个测试，因为它需要完整的名称 mui-AbcXYZ-success。只有当我提供确切的名称（wirh 带连字符的文本和 mui 添加的随机数）时，我才会通过它

我该如何测试？

我尝试执行以下操作但没有结果： expect( getByTestId('thirdCheck')).toHaveClass(/success/)

我也试过应用 .className 或 .classList 但这并没有给我元素上的 classes 列表。

Answer 1

经过几个小时的挫折，我就是这样做的，如果有人有更好的解决方案，请随时 post。我会接受的。

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

对于琐碎的事情来说，看起来有点冗长。但就是这样。

更新：

@Fyodor 在评论中有一个很好的观点。我们可以简单地这样做：

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

Answer 2

在 CSS-in-JS 中，class名称有时会附加通用标识符。因此，很高兴有一种快速的方法来验证您的自定义 class 是否在元素上。这是一种松散的单行方法，用于在没有正则表达式的情况下验证自定义 class 的子字符串。

注意：不忽略大小写。如果您需要，那么 toMatch 的答案对您来说是更好的解决方案。

expect(yourSelectedElement.getAttribute("class")).toContain("yourClassSubstring");

如何使用 'toHaveClass' 来匹配 Jest 中的子字符串？

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

javascript

reactjs

jestjs

material-ui

react-testing-library