[Vuejs]-Get the outer-most layer of VUEjs wrapper test-utils

by

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.

👤Alex Gill

Leave a comment