[Bug Report][3.6.7] Can't test components that require the v-app component as their parent.

[Yamadetta]

Environment

Vuetify Version: 3.6.7 Vue Version: 3.4.27 Browsers: Chrome 125.0.0.0 OS: Windows 10

Steps to reproduce

Continuing from the discussion (https://github.com/vuetifyjs/vuetify/discussions/18076), components like VMain, VNavigationDrawer, VBottomNavigation, VAppBar, and VLayoutItem do not render in tests using @vue/test-utils, making it impossible to test components that contain these components.

For example, the following test:

import { mount } from '@vue/test-utils'
import { describe, test } from 'vitest'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives
})

const mountComponent = (props?: any) => mount(
  {
    template: `
      <v-app>
        <v-app-bar>
          <div>123</div>
        </v-app-bar>
      </v-app>
    `,
    setup() {
      return { props }
    }
  },
  {
    global: {
      plugins: [vuetify]
    },
    props
  }
)

describe('should', () => {
  test('', () => {
    const wrapper = mountComponent({
      mainPage: true,
      title: 'main'
    })
    console.log(wrapper.html())
  })
})

Will have the following markup:

<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr" mainpage="true" title="main">
  <div class="v-application__wrap">
    <!---->
  </div>
</div>

The following variant also does not work:

import { mount } from '@vue/test-utils'
import { describe, test } from 'vitest'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives
})

const mountComponent = (props?: any) => mount(
  components.VApp,
  {
    slots: {
      default: components.VLayoutItem
    },
    global: {
      plugins: [vuetify]
    },
    props
  }
)

describe('should', () => {
  test('', () => {
    const wrapper = mountComponent({
      mainPage: true,
      title: 'main'
    })
    console.log(wrapper.html())
  })
})

Expected Behavior

Components must rendering

Actual Behavior

Components are not rendering

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Can’t give a link to the repository, since the work is being done in a private repository

[Yamadetta]

UPD: I managed to fix it using this before the first expect:

    await new Promise((res) => {
      setTimeout(() => res(''), 1)
    })

I'm not sure it's very obvious. It might be worth describing this in the documentation if it can't be fixed.

[thopiddock]

I believe I can confirm this behaviour is present since 3.6.0.