在Jest中如何打印已mounted组件的特定子元素内容？

你调用wrapper.find('some selector').debug()无输出的核心原因大概率是选择器未匹配到任何元素，find方法返回了空的DOM集合，自然没有内容可以打印。可以按照以下步骤排查并实现需求：

第一步：先验证选择器的匹配结果 #

先打印匹配到的元素数量或者存在状态，确认是否命中目标元素：

// 打印匹配到的元素数量，返回0说明未匹配到任何内容
console.log('匹配数量：', wrapper.find('你的选择器').length);
// 也可以直接调用exists方法判断是否存在匹配元素
console.log('是否存在：', wrapper.find('你的选择器').exists());

如果返回数量为0，优先排查：

• 选择器语法是否正确：类选择器要加.、ID选择器要加#，匹配React自定义组件时要直接传入组件引用而非字符串，比如find(ChildComponent)而非find('ChildComponent')
• 如果目标元素是异步渲染生成的，需要先执行wrapper.update()更新组件实例后再执行查找

第二步：打印匹配元素的内容 #

确认匹配到元素后，可以根据需要选择以下方法打印内容：

• 打印格式化的组件DOM结构，和wrapper.debug()输出格式一致：

const target = wrapper.find('你的选择器');
if (target.length) {
  console.log(target.debug());
}

• 打印原生HTML字符串：

console.log(target.html());

• 打印元素内的纯文本内容：

console.log(target.text());

• 如果匹配到多个元素，可通过at()方法指定下标打印对应位置的元素：

// 打印第二个匹配到的元素结构，下标从0开始
console.log(wrapper.find('.list-item').at(1).debug());

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