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

Question

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

\n

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

\n

我没有通过这个测试，因为它需要完整的名称mui-AbcXYZ-success。仅当我提供确切的名称（带有连字符的文本和 mui 添加的随机数）时，I\xe2\x80\x99m 才能通过此操作

\n

我该如何测试呢？

\n

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

\n

我也尝试应用 .classNameor.classList但这并没有\xe2\x80\x99t 给我元素上的类列表。

\n

Answer 1

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

      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，类名有时会附加通用标识符。因此，最好有一种快速的方法来验证元素上的自定义类。这是一种松散的单行方法，用于在没有正则表达式的情况下验证自定义类的子字符串。

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

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