如何在Jest中使用screen.debug且不显示折叠Accordion内的信息？

以下是几种可行的实现方式，可根据你的组件结构选择适配的方案：

1. 临时移除折叠Accordion内容后执行debug #

如果折叠状态的Accordion有明确标识（比如特定类名或ARIA属性），可以在调用screen.debug()前临时清空其内部内容，完成debug后再恢复，不会影响后续测试逻辑。

示例代码（假设折叠状态的Accordion用aria-expanded="false"标记）：

// 定位折叠状态的Accordion及其内容区域
const collapsedAccordion = document.querySelector('[aria-expanded="false"]');
if (collapsedAccordion) {
  const contentArea = collapsedAccordion.querySelector('.accordion-content');
  if (contentArea) {
    // 保存原始内容
    const originalContent = contentArea.innerHTML;
    // 临时清空内容
    contentArea.innerHTML = '';
    // 执行debug
    screen.debug();
    // 恢复原始内容
    contentArea.innerHTML = originalContent;
  }
}

2. 封装自定义debug函数自动过滤 #

如果多个测试用例都需要该需求，可以封装一个自定义debug函数，自动克隆DOM并移除折叠Accordion的内容，避免重复编写相同逻辑。

示例代码：

const debugWithoutCollapsedAccordions = () => {
  // 克隆整个文档节点，避免修改原DOM
  const clonedRoot = document.documentElement.cloneNode(true);
  // 移除所有折叠状态Accordion的内容
  clonedRoot.querySelectorAll('[aria-expanded="false"] .accordion-content').forEach(content => {
    content.remove();
  });
  // 打印处理后的DOM结构
  console.log(clonedRoot.outerHTML);
};

// 测试中直接调用该函数替代screen.debug()
debugWithoutCollapsedAccordions();

3. 仅debug可见元素 #

如果折叠状态的Accordion内容本身被设置为不可见（比如display: none、visibility: hidden或aria-hidden="true"），可以利用Testing Library的查询选项，只获取并debug可见元素。

示例代码：

// 查询所有可见元素（排除隐藏元素）
const visibleElements = screen.queryAllByRole('*', { hidden: false });
// 仅打印可见元素的DOM结构
screen.debug(visibleElements);

注意：以上示例中的选择器（如.accordion-content、[aria-expanded="false"]）需要根据你项目中Accordion组件的实际标记调整，确保能准确匹配折叠状态的组件及其内容区域。

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