英文:
Is it possible to hide class names in jest output on failure?
问题
当我的测试未能在页面上找到一个元素时，Jest会将DOM打印到我的屏幕上。我正在使用MUI，它在类名上弄得一团糟，就像这样：
<div
class="MuiFormControl-root MuiTextField-root css-1akjbnu-MuiFormControl-root-MuiTextField-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-rrjzhf-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="true"
for="application-name-yq40gwnkmyh"
id="application-name-yq40gwnkmyh-label"
>
Application name
</label>
这真的很难阅读。我想知道是否有选项可以隐藏这个输出中的类名，只留下DOM元素？
更新：似乎是react-testing-library，而不是jest。但无论如何，看起来没有这样的选项：https://testing-library.com/docs/dom-testing-library/api-debugging/#debugging
英文:
When my test fails to find an element on a page, Jest prints out the DOM to my screen. I'm using MUI and it makes a mess with classnames, like this:
<div
class="MuiFormControl-root MuiTextField-root css-1akjbnu-MuiFormControl-root-MuiTextField-root"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-rrjzhf-MuiFormLabel-root-MuiInputLabel-root"
data-shrink="true"
for="application-name-yq40gwnkmyh"
id="application-name-yq40gwnkmyh-label"
>
Application name
</label>
It's really hard to read it. I wonder if there's an option to hide class names from this output, and only leave the DOM elements?
Update: seems it's react-testing-library, not jest. But anyway, looks like there's no such option: https://testing-library.com/docs/dom-testing-library/api-debugging/#debugging
答案1
得分: 1
很遗憾，似乎在使用react-testing-library时，没有隐藏输出中的类名的选项。然而，您可以尝试使用像Chrome DevTools这样的DOM检查工具来检查页面上的元素并查看DOM的结构。这对于调试和理解页面的结构可能很有用，而无需查看类名。
您还可以考虑使用Jest的自定义格式化程序，比如pretty-quick包，它可以以更易读的方式格式化测试输出。即使类名仍然存在，这可能会使测试输出更容易理解。
如果您仍然有困难阅读输出，可以考虑使用可视化DOM的单独工具，如浏览器扩展或独立应用程序。这些工具可以提供更容易理解的DOM的可视化表示，在调试测试时可能会有所帮助。
英文:
Unfortunately, it doesn't seem like there's an option to hide the class names from the output when using react-testing-library. However, you can try using a DOM inspector tool like the Chrome DevTools to inspect the elements on the page and see the structure of the DOM. This can be useful for debugging and understanding the structure of the page, without having to sift through the class names.
You can also consider using a custom formatter for Jest, such as the pretty-quick package, which can format the test output in a more readable manner. This might make it easier to understand the output of the tests, even if the class names are still present.
If you still have trouble reading the output, you can consider using a separate tool for visualizing the DOM, such as a browser extension or a standalone application. These tools can provide a visual representation of the DOM that is easier to understand, which can be helpful when debugging your tests.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论