開発環境
名称 | バージョン |
---|---|
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コミット分