Dapatkan kegunaan ujian pembalut paling luar bagi VUEjs

Question

Saya sedang menulis ujian untuk VueJS dan saya mahu mengakses lapisan paling luar HTML. Walau bagaimanapun, tidak kira apa kaedah yang saya gunakan, lapisan paling luar sentiasa diabaikan. Bagaimanapun, saya boleh mengakses lapisan paling luar ini dan melakukan sesuatu dengannya (cth. 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

Anda hanya boleh mendapatkan elemen dalaman kerana elemen luar adalah pembalut anda. Gunakan pilihan pemasangan attachTo.

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

Anda kemudian boleh melakukan perkara berikut, walaupun saya rasa ini bergantung pada versi. Saya syorkan anda mengemas kini kepada yang terkini dan terhebat!

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

Ujian pantas mencadangkan atribut mungkin tidak disokong?

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

Nota: Apabila menambahkan pada DOM, anda harus memanggil wrapper.destroy() pada penghujung ujian untuk mengalih keluar elemen yang diberikan daripada dokumen dan memusnahkan tika komponen.