VDialog and VMenu won't close in Unittests

[MrWook]

It seems like that the VDialog and VMenu components can't be closed with v-model in unittests.
For example with this component:

<template>
  <VMenu v-model="isOpen">
    {{ isOpen }}
    <VBtn @click="close">close</VBtn>
  </VMenu>
</template>

<script lang="ts" setup>
const isOpen = ref(true)

const close = () => {
  isOpen.value = false
}
</script>

And this unittest:

const renderDefault = (Component: any): RenderResult => {
  const root = document.createElement('div')
  root.setAttribute('data-v-app', 'true')

  const vuetify = createVuetify({
    components,
    directives,
  })

  return render(Component, {
    container: document.body.appendChild(root),
    global: {
      plugins: [vuetify],
    },
  })
}
describe('MyMenu', () => {
  const user = userEvent.setup()
  it('should close', async () => {
    renderDefault(MyMenu)
    await waitFor(() => {
      expect(screen.getByText('close')).toBeInTheDocument()
    })
    await user.click(screen.getByText('close'))

    await nextTick()
    await waitFor(() => {
      expect(screen.queryByText('close')).not.toBeInTheDocument()
    })
  })
})

The isOpen variable is correctly updates as one could see in the HTML error which should not be seen as it should have been closed.
If the variable isOpen is initialized with false the menu is not rendered

Has someone an idea how to test the closing of VMenu and VDialog?

[christianpetzold]

I'm facing a similar problem. Did you find a solution?

[MrWook]

Not really, i just gave up and didn't test if menus close/open on specific interactions.