能否在react-testing-library测试失败输出中隐藏DOM类名？

问题场景 #

当react-testing-library测试找不到目标元素时，会自动打印当前DOM结构辅助调试。但使用MUI框架时，输出的DOM里会带一堆自动生成的冗长类名，示例如下：

<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>
</div>

这种输出可读性极差，想只保留DOM元素结构，隐藏所有类名。

官方支持情况 #

查阅react-testing-library官方文档后，确认框架本身没有直接提供隐藏类名的配置选项。

可行解决方案 #

1. 自定义DOM格式化函数 #

重写react-testing-library内部的prettyDOM函数，遍历DOM节点并移除class属性后再输出：

import { prettyDOM } from '@testing-library/react';

// 自定义格式化逻辑：移除所有节点的class属性
const customPrettyDOM = (element, options) => {
  const clonedElement = element.cloneNode(true);
  
  const removeClassAttr = (node) => {
    if (node.nodeType === Node.ELEMENT_NODE) {
      node.removeAttribute('class');
      Array.from(node.childNodes).forEach(removeClassAttr);
    }
  };
  
  removeClassAttr(clonedElement);
  return prettyDOM(clonedElement, options);
};

// 覆盖默认的prettyDOM方法
jest.spyOn(require('@testing-library/react'), 'prettyDOM').mockImplementation(customPrettyDOM);

将这段代码放在测试入口文件（比如setupTests.js）中，所有测试的DOM输出都会自动清理类名。

2. 临时调试：正则批量清理 #

如果只是临时调试需要，可复制输出的DOM内容，用正则表达式批量移除类名。匹配规则：

class="[^"]*"

将匹配到的内容替换为空字符串，就能快速得到干净的DOM结构。

3. Jest自定义Reporter #

如果需要全局统一处理测试输出，可以编写Jest自定义Reporter，在测试失败输出DOM前自动清理类名属性。这种方式适合大型项目统一调试规范。

内容的提问来源于stack exchange，提问作者fbjorn