【问题标题】:How to use 'toHaveClass' to match a substring in Jest?如何使用“toHaveClass”来匹配 Jest 中的子字符串?
【发布时间】:2021-08-13 11:40:38
【问题描述】:

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

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

我没有通过这个测试,因为它需要完整的名称mui-AbcXYZ-success。只有当我提供确切的名称(wirh 连字符文本和 mui 添加的随机数)时,我才能通过此操作

我该如何测试?

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

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

【问题讨论】:

    标签: javascript reactjs jestjs material-ui react-testing-library


    【解决方案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'));
    

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

    【讨论】:

    • 很棒的解决方案!如果你不关心其他类之间的确切类相对位置,你可以做expect(getByTestId('thirdCheck').getAttribute('class')).toMatch(/success/gi)
    猜你喜欢
    • 2016-10-12
    • 1970-01-01
    • 1970-01-01
    • 2018-07-16
    • 1970-01-01
    • 2021-08-25
    • 1970-01-01
    • 1970-01-01
    • 2015-06-08
    相关资源
    最近更新 更多