Get the outer-most layer of VUEjs wrapper test-utils

Question

I am writing a test for VueJS, and I want to access the outer-most layer of HTML. However, regardless of the methods I use, the outer-most layer is always ignored. Is there anyway I can access this outermost layer, then do something with it (say, 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

You are only getting the inner element because the outer one is your wrapper. Use the attachTo mount option.

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

You can then do the following although I think this is dependent on version. I would recommend updating to the latest and greatest!

  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...

A quick test suggests support for attributes is not there maybe?

Docs: https://v1.test-utils.vuejs.org/api/options.html#attachto

NOTE: When attaching to the DOM, you should call wrapper.destroy() at the end of your test to remove the rendered elements from the document and destroy the component instance.