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

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

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

expect( getByTestId('thirdCheck')).toHaveClass("成功")

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

我如何测试它?

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

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

最佳答案

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

      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)

关于javascript - 如何使用 'toHaveClass' 来匹配 Jest 中的子字符串?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67684398/

相关文章:

javascript - 使用 ajax 从服务器获取 React 组件

javascript - 为什么 Jest 尝试运行我的整个应用程序而不是导入的模块?

javascript - 开 Jest : How to consume result of jest. genMockFromModule

javascript - 开 Jest 单元测试: setTimeout not firing in async test

javascript - 如何循环遍历 javascript 中的子对象?

javascript - Node.Js/Electron 使用 mssql 模块将表单数据插入表中

javascript - 权限对话框按钮标签是 "Go to app"而不是 "Login with Facebook"

javascript - 在 Sharepoint 上 react 'Set is undefined'

javascript - 预期有 1 个参数,但得到 0 个参数。TS2554 - 可选对象属性但不是对象?

javascript - React - 如何检测子组件是否被单击