Bug: Unable to use with Vue Final Modal due to teleport #2165
Description
Describe the bug
After updating Vue Final Modal from 3.x to 4.x, it is now impossible to have tests pass for the modal, due to the weird behaviour of teleporting to the body, I presume. Basically it's impossible to test contents of the base modal, as even when stubbing teleport,
To Reproduce
https://stackblitz.com/edit/vue-test-utils-repro-1234?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts
Expected behavior
Tests would pass as normal, without Vue Test Utils throwing an error
Related information:
Error: Cannot call element on an empty DOMWrapper.
❯ Object.get node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.mjs:1550:27
1548| return (element.nodeName !== '#comment' &&
1549| isStyleVisible(element) &&
1550| isAttributeVisible(element) &&
| ^
1551| (!element.parentElement || isElementVisible(element.parentElement)));
1552| }
❯ eval src/components/__tests__/HelloWorld.spec.ts:46:26Here what running html() on the modal returns now:
<teleport-stub data-v-e17ea971="" to="body" disabled="false">
<!---->
</teleport-stub>Here what it was before (aka it is fully rendered:
<div data-v-2836fdb5="" data-v-90ea3908="" style="z-index: 1000; display: none;" class="vfm vfm--inset vfm--fixed">
<transition-stub data-v-2836fdb5="" enteractiveclass="ease-out duration-300" enterfromclass="opacity-0" entertoclass="opacity-100" leaveactiveclass="ease-in duration-200" leavefromclass="opacity-100" leavetoclass="opacity-0" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<transition-stub data-v-2836fdb5="" enteractiveclass="ease-out duration-300" enterfromclass="opacity-0 translate-y-4 sm_translate-y-0 sm_scale-95" entertoclass="opacity-100 translate-y-0 sm_scale-100" leaveactiveclass="ease-in duration-200" leavefromclass="opacity-100 translate-y-0 sm_scale-100" leavetoclass="opacity-0 translate-y-4 sm_translate-y-0 sm_scale-95" appear="false" persisted="false" css="true">
<div data-v-2836fdb5="" class="vfm__container vfm--absolute vfm--inset vfm--outline-none flex items-end justify-center min-h-screen p-4 text-center sm_items-center sm_p-0" aria-expanded="false" role="dialog" aria-modal="true" tabindex="-1" style="display: none;">
<div data-v-2836fdb5="" class="vfm__content sm_max-w-md w-full">
<div data-v-90ea3908="" data-v-2836fdb5-s="" class="modal-body bg-white dark_bg-gray-800">
<transition-stub data-v-c6300b7f="" data-v-90ea3908="" data-v-2836fdb5-s="" name="loader-fade" appear="false" persisted="false" css="true" tabindex="-1">
<div tabindex="0" class="vl-overlay vl-active" aria-busy="false" aria-label="Loading" style="display: none;">
<div class="vl-background" style="opacity: 0.95;"></div>
<div class="vl-icon"><svg data-v-c6300b7f="" class="animate-spin h-8 w-8 text-blue-600 dark_text-moon-yellow-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle data-v-c6300b7f="" class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path data-v-c6300b7f="" class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg></div>
</div>
</transition-stub>
<div data-v-90ea3908="" data-v-2836fdb5-s="" class="px-4 pt-5 pb-4 sm_p-6 sm_pb-4 rounded-lg bg-white dark_bg-gray-800">
<div data-v-90ea3908="" data-v-2836fdb5-s="" class="sm_flex sm_items-start"></div>
</div>
<!--v-if-->
</div>
<!--v-if-->
</div>
</div>
</transition-stub>
</div>Additional context
I am under the impression that this issue falls under Vue Test Utils, as it should be able to handle teleports better, hence why I am opening this report here instead of the Vue Final Modal repo. Do let me know if you feel like it's out of scope of test utils