获取VUEjs最外层的包装器test-utils

Question

我正在为VueJS编写一个测试，我想访问HTML的最外层。然而，无论我使用什么方法，最外层总是被忽略。无论如何，我可以访问这个最外层，然后用它做一些事情（例如，outermostLayer.removeAttribute('key')）

const originalHTML = '<main key="outermost-layer"><main>content</main></main>';     
const component = {
    template: originalHTML
};
const wrapper = mount(component);
await flushPromises();
console.log(wrapper.element.querySelector('main')); // only return the inner main       
console.log(wrapper.element.getElementsByTagName('main')); //only the inner one

Answer 1

您只能获取内部元素，因为外部元素是您的包装器。 使用 attachTo 安装选项。

const wrapper = mount(component, {
    attachTo: document.body
  });

然后您可以执行以下操作，尽管我认为这取决于版本。我建议更新到最新最好的！

console.log(wrapper.findAll('main').length); // 2 - This confirms there are 2x main elements.
  console.log(wrapper.findAll('main')[0]); // 0 - The first element.
  console.log(wrapper.findAll('main')[0].attributes('key')); // undefined - This doesn't appear to work...

快速测试表明可能不支持属性？

文档：https://v1.test-utils.vuejs .org/api/options.html#attachto

注意：附加到 DOM 时，您应该在测试结束时调用wrapper.destroy()，以从文档中删除渲染的元素并销毁组件实例。