Opening Modal Dialog in the test

[savifon]

I have a test that simulates the opening of a Modal (HeadlessUI), however, when performing the simulation of clicking the open button, the modal does not open. It just stays:

    <!--teleport start-->
    <!--teleport end-->
    <div style="position: absolute; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"></div>

Modal.vue code:

    <template>
      <TransitionRoot as="template" :show="modal.isOpen">
        <Dialog as="div" class="z-50 absolute inset-0" @close="modal.closeModal()">
          <div
            class="flex items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
          >
            <TransitionChild
              as="template"
              enter="ease-out duration-300"
              enter-from="opacity-0"
              enter-to="opacity-100"
              leave="ease-in duration-200"
              leave-from="opacity-100"
              leave-to="opacity-0"
            >
              <DialogOverlay
                class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
              />
            </TransitionChild>
            <TransitionChild
              as="template"
              enter="ease-out duration-300"
              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
              enter-to="opacity-100 translate-y-0 sm:scale-100"
              leave="ease-in duration-200"
              leave-from="opacity-100 translate-y-0 sm:scale-100"
              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
              <!-- content modal -->
            </TransitionChild>
          </div>
        </Dialog>
      </TransitionRoot>
    </template>
    
    <script setup lang="ts">
    import { useModal } from "@/stores/modal"
    import {
      Dialog,
      DialogOverlay,
      TransitionChild,
      TransitionRoot
    } from "@headlessui/vue"
    
    const modal = useModal()
    </script>

App.vue Code:

  <script setup lang="ts">
   import { RouterView } from "vue-router"
   import Modal from "@/components/Modal.vue"
   </script>
   
   <template>
     <Modal />
     <RouterView />
   </template>

Test:

    import { loadFeature, defineFeature } from "jest-cucumber"
    import { mount, flushPromises, VueWrapper } from "@vue/test-utils"
    import { describe, beforeEach, afterEach, jest } from "@jest/globals"
    import { createTestingPinia } from "@pinia/testing"
    import { createRouter, createWebHistory, type Router } from "vue-router"
    import { routes } from "@/router/index"
    import { setupIntersectionObserverMock } from "tests/unit/__mocks__/intersectionObserver"
    import App from "@/App.vue"
    // import Modal from "@/components/Modal.vue"
    
    setupIntersectionObserverMock()
    const feature = loadFeature(
      "tests/features/feature/feature.feature"
    )
    let wrapper: VueWrapper
    let router: Router
    
    beforeEach(() => {
      setupIntersectionObserverMock()
      // const el = document.createElement("div")
      // el.id = "headlessui-portal-root"
      // document.body.appendChild(el)
      router = createRouter({
        history: createWebHistory(),
        routes: routes
      })
    })
    
    afterEach(() => {
      // // clean up
      // document.body.outerHTML = ""
      // jest.clearAllMocks()
    })
    
    const setRoute = async (url: string) => {
      router.push(url)
      await router.isReady()
    }
    
    const setup = async () => {
      const screen = mount(App, {
        // attachTo: document.body,
        global: {
          plugins: [
            createTestingPinia({
              stubActions: false
            }),
            router
          ]
        }
      })
      await flushPromises()
      return screen
    }
    
    defineFeature(feature, test => {
      describe("Modal", () => {
        test("Open Modal", async ({ given, when }) => {
          given("...", async () => {
            await setRoute("/router/view/abc")
            wrapper = await setup()
            // ...
          })
    
          when("...", async () => {
            await wrapper.find('span[data-test-id="button"]').trigger("click")
            await flushPromises()
            console.log(wrapper.html())
            // const modal = wrapper.findComponent(Modal)
            // console.log(modal.html())
            // ...
          })
        })
      })
    })

I have already implemented the code provided in the documentation, but without success as well.

Thank you for your attention!

[savifon]

Minimal example to simulate the scenario: https://stackblitz.com/edit/vue3-vuex-router-jest-hbds1g