So testen Sie Enzymkomponenten, die in die oberste Ebene rendern

Question

Ich versuche, eine Komponente zu testen, die eine grommetMenu Komponente rendert. Die Tülle Menu Komponente rendert ein absolut positioniertes Menü in die oberste Ebene des Dokuments, das als untergeordnetes Element in body eingefügt wird. Daher rendert es außerhalb des Umfangs des Wrappers. Ich kann es mit document.body.innerHTML (Verweis auf Jsdom Dokument) finden, aber ich möchte mit ihm interagieren mit Enzym. Irgendwelche Empfehlungen?

Mein Test:

const wrapper = mount(
    <MyComponent checkThis={checkThisSpy} /> 
); 
wrapper.find('.spec-menu').simulate('click'); 
console.log(document.body.innerHTML); // Shows the absolute menu inserted into the body 

Die Linie in Tülle, die diese document.body.insertBefore(drop.container, document.body.firstChild); tut. https://github.com/grommet/grommet/blob/master/src/js/utils/Drop.js#L197

Nur auf der Suche nach einer Anleitung für den besten Weg, damit umzugehen. Vielen Dank!

Answer 1

Letztendlich konnten wir keine Möglichkeit finden, zu testen, dass die Komponente das Enzym selbst verwendet. Da wir jsdom zur Bereitstellung des Doms verwenden, ist document weltweit verfügbar. Wir haben schließlich einige Erwartungen schriftlich bis die

aussehen

expect(document.getElementsByClassName('my-top-level')).to.have.length(1) 

Die normale dom API reicht aus, um alles zu testen, wir wollen, es ist nur ein wenig clunkier.