Trouble Testing Vuetify Layout Components in Vue 3 - Wrapper is Empty

[Jaa-W]

Hi everyone,
I am experiencing an issue when adding unit tests to my Vue 3 application that uses Vuetify. I am following the guide provided on the Vuetify Unit Testing Guide page. While tests work fine for basic components, I encounter a problem when trying to test layout components such as v-app-bar. The wrapper is unexpectedly empty and does not contain any child components.

Expected Behavior:

The wrapper should include all child components of v-app-bar so that they can be tested.

Actual Behavior:

The wrapper is empty and does not contain any child components, making it impossible to test.

Code:

// BaseTest.spec.js
import { mount } from '@vue/test-utils'
import { expect, test } from 'vitest'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

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

global.ResizeObserver = require('resize-observer-polyfill')

test('displays message', () => {
  const wrapper = mount({
    template: `  <v-app>
    <v-app-bar>
      <v-toolbar-title>My App</v-toolbar-title>
    </v-app-bar>
  </v-app>`
  }, {
    props: {},
    global: {
      plugins: [vuetify],
    }
  })
  console.log(wrapper.html());
  // Assert the rendered text of the component
  expect(wrapper.text()).toContain('My App')
})