Vue Test Utils如何获取组件最外层HTML元素并进行操作？

你遇到的问题核心是：wrapper.element本身就是组件的最外层根元素，不需要再通过querySelector或getElementsByTagName去查找——这些方法是在根元素内部进行查询，所以只会返回内层的<main>。

解决方案 #

直接使用wrapper.element获取最外层元素，然后直接对它执行属性操作：

const originalHTML = '<main key="outermost-layer"><main>content</main></main>';     
const component = {
    template: originalHTML
};
const wrapper = mount(component);
await flushPromises();

// 获取最外层根元素
const outermostLayer = wrapper.element;
// 移除key属性
outermostLayer.removeAttribute('key');

// 验证操作结果
console.log(outermostLayer.hasAttribute('key')); // 输出 false
console.log(outermostLayer); // 输出外层的<main>元素（已无key属性）

原理说明 #

当你的Vue组件模板只有单个根节点时，Vue Test Utils的mount方法返回的wrapper.element会直接指向这个根节点DOM对象。你之前的查询方法（querySelector('main')）是从根元素的子节点里查找匹配项，自然只会找到内层的<main>。

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