開発環境

名称	バージョン
Vue	3.2
vuetify	3.6.1
vue-test-utils	2.4
vitest	4.5

症状

vue-test-utilのmount関数でコンポーネントの部分を確認したところ、
Vuetifyのコンポーネントが表示されません。

出力結果

症状 console.log(wrapper.html())の出力結果


<h1 class="d-flex justify-center mb-6 flex-row">バブルソート</h1>
<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
  <div class="v-application__wrap">
    <!----> ←vuetifyのコンポーネントがある箇所が表示されない！
  </div>
</div>

プロダクトコード

<template>
    <v-app>
        <v-main>
                <h1  class="d-flex justify-center mb-6  flex-row ">バブルソート</h1>
                <v-sheet class="d-flex justify-center mb-6 ">
                    <label for="elementNumber">配列sの数</label>
                    <div width="50px" height="60px">
                        <v-select name="elementNumber" :items="['4','5','6','7','8']"></v-select>
                    </div> 
                </v-sheet>
        </v-main>
    </v-app>
</template>

テストコード


import { mount, shallowMount } from '@vue/test-utils'
// import {render, screen} from '@testing-library/vue'
import { test } from 'vitest'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import BubbleSort from './BubbleSort.vue'


// docker-compose exec -it app bash -c  "npm run test BubbleSort.test.js "

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

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

test('displays message', () => {

  const wrapper = mount(BubbleSort,
    {
    global: {
      plugins: [vuetify],
    }
  })
  console.log(wrapper.html())
})

原因

<v-app><v-main></v-main?</v-app>が含まれているため

対処方法

<v-app><v-main></v-main?</v-app>をテストするコンポーネントから外す

親コンポーネントに記述する。
自分はlaravelを使っているのでコンポーネントを呼び出しているbladeに書きました。

プロダクトコード

<template>
-    <v-app>
-        <v-main>
                <h1  class="d-flex justify-center mb-6  flex-row ">バブルソート</h1>
                <v-sheet class="d-flex justify-center mb-6 ">
                    <label for="elementNumber">配列sの数</label>
                    <div width="50px" height="60px">
                        <v-select name="elementNumber" :items="['4','5','6','7','8']"></v-select>
                    </div> 
                </v-sheet>
-        </v-main>
-    </v-app>
</template>

出力結果

vuetifyと思われる要素が表示されています。
（素のhtmlに変換されているっぽい）

改善後のconsole.log(wrapper.html())


<h1 class="d-flex justify-center mb-6 flex-row">バブルソート</h1>
-<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
-  <div class="v-application__wrap">
-    <!----> 
-  </div>
-</div>
+<div class="v-sheet v-theme--light d-flex justify-center mb-6">
+<label for="elementNumber">配列sの数</label>
+  <div width="50px" height="60px">
+    <div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field v-select v-select--single">
+      <!---->
+      <div class="v-input__control">
+        <div class="v-field v-field--appended v-field--center-affix +v-field--no-label v-field--variant-filled v-theme--light v-locale--is-ltr" role="combobox">
+          <div class="v-field__overlay"></div>
+          <div class="v-field__loader">
+            <div class="v-progress-linear v-theme--light v-locale--+is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: +2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-+valuemax="100">
+              <!---->
+              <div class="v-progress-linear__background"></div>
+              <div class="v-progress-linear__buffer" style="width: 0%;"></div>
+              <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                <div class="v-progress-linear__indeterminate">
+                  <div class="v-progress-linear__indeterminate long"></div>
+                  <div class="v-progress-linear__indeterminate short"></div>
+                </div>
+              </transition-stub>
+              <!---->
+            </div>
+          </div>
+          <!---->
+          <div class="v-field__field" data-no-activator="">
+            <!----><label class="v-label v-field-label" for="input-0">
+              <!---->
+              <!---->
+            </label>
+            <!---->
+            <div class="v-field__input" data-no-activator="">
+              <!---->
+              <!----><input name="elementNumber" size="1" +type="text" id="input-0" aria-describedby="input-0-messages" inputmode="none" aria-label="Open" title="Open" value="">
+            </div>
+           <!---->
+          </div>
+          <!---->
+          <div class="v-field__append-inner">
+            <!----><i class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-select__menu-icon" aria-hidden="true"></i>
+            <!---->
+          </div>
+          <div class="v-field__outline">
+            <!---->
+            <!---->
+          </div>
+        </div>
+      </div>
+      <!---->
+      <div class="v-input__details">
+        <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages" role="alert" aria-live="polite" id="input-0-messages">
+          <!---->
+        </transition-group-stub>
+        <!---->
+      </div>
+    </div>
+  </div>
</div>

参考

githubコミット分