如何在React Testing Library中查看getElementsByClassName返回的HTML

getElementsByClassName 返回值是实时更新的HTMLCollection类数组对象，React Testing Library 底层依赖 jsdom 模拟DOM环境，jsdom 对原生DOM集合对象做了Proxy封装，直接打印整个集合对象时，只会输出Proxy {Symbol(impl): HTMLCollectionImpl}这类内部实现标识，不会展示可读的DOM内容。

• 不要直接打印整个HTMLCollection集合对象，先取出集合里的具体DOM节点，访问节点的outerHTML/innerHTML属性，就能拿到可读的HTML字符串。
• HTMLCollection是类数组结构，先转成普通数组再遍历处理即可：

const rowCollection = container.getElementsByClassName("my-Table-row");

// 遍历打印每一个匹配元素的HTML
Array.from(rowCollection).forEach((row, idx) => {
  console.log(`第${idx + 1}个匹配元素的HTML：`, row.outerHTML);
});

// 一次性查看所有匹配元素的HTML
const allMatchedHtml = Array.from(rowCollection)
  .map(item => item.outerHTML)
  .join('\n---分割线---\n');
console.log('所有匹配元素的HTML内容：\n', allMatchedHtml);

• 更推荐遵循React Testing Library的使用规范，优先用自带的查询API或者querySelectorAll获取元素，调试更方便：

// querySelectorAll返回静态NodeList，转数组后处理逻辑和上面一致
const rows = container.querySelectorAll('.my-Table-row');

// 语义化查询最佳实践，优先按角色查询
// import { screen } from '@testing-library/react'
// const rows = screen.getAllByRole('row')

• 如果打印时出现内容截断，可以加深度配置输出完整内容：

const util = require('util');
console.log(
  util.inspect(
    Array.from(rowCollection).map(i => i.outerHTML),
    { depth: null, maxArrayLength: null }
  )
);

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