Obtenez les utilitaires de test du wrapper le plus externe de VUEjs

Question

J'écris un test pour VueJS et je souhaite accéder à la couche la plus externe du HTML. Cependant, quelle que soit la méthode utilisée, la couche la plus externe est toujours ignorée. Quoi qu'il en soit, je peux accéder à cette couche la plus externe et faire quelque chose avec (par exemple 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

Vous ne pouvez obtenir que des éléments internes car les éléments externes sont vos emballages. Utilisez l'option d'installation attachTo.

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

Vous pouvez ensuite faire ce qui suit, même si je pense que cela dépend de la version. Je recommande de mettre à jour vers la dernière et la meilleure version !

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

Un test rapide montre que l'attribut n'est peut-être pas pris en charge ?

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

Remarque : lors de l'ajout au DOM, vous devez appeler wrapper.destroy() à la fin du test pour supprimer l'élément rendu du document et détruire l'instance du composant.