Holen Sie sich die äußersten Wrapper-Test-Utilities von VUEjs

Question

Ich schreibe einen Test für VueJS und möchte auf die äußerste HTML-Ebene zugreifen. Allerdings wird die äußerste Ebene immer ignoriert, egal welche Methode ich verwende. Jedenfalls kann ich auf diese äußerste Schicht zugreifen und etwas damit machen (z. B. 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()，以从文档中删除渲染的元素并销毁组件实例。