在Jest输出中,当测试失败时是否可能隐藏类名?

huangapple go评论58阅读模式
英文:

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.

huangapple
  • 本文由 发表于 2023年2月13日 22:58:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/75437564.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定