Vue test Utilsにかんするメモ(Vuetifyまわり)

Vuetifyを使用しているプロジェクトでvue-test-utilsを使用してテスト書くときのメモ
Vuetify 2での話なので、Vuetify 3だとやり方が異なるかもしれない

Jsetのsetup.ts内でVuetifyをVueに登録する

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

Vue.useでVuetifyを登録しないとVuetifyのAPIが使用できないので登録する必要がある

また、mount する前に、下記追加する

const div = document.createElement('div')
div.setAttribute('data-app', 'true')
document.body.appendChild

VDialogのような条件によってレンダリングするものは、
通常、root以下のv-appに対してレンダリングするが、
Componentをmountした際にはv-appは存在しないので別途、属性を付与する

wrapperする前に属性の付与をすればよいので
これもsetup.tsに記載

上記仕様のため、Componentの検索にはマウントしたVueWrapperから直接検索をかける

const wrapper = mount(Component)

const hogeComponent = wrapper.findComponent(hoge)
const hogeComponent = hogeComponent.find('button').trigger('click')
// V-dialog内のdata-test="V-Dialog"を検索
// hogeComponentないに<v-dialog>があってもhogeComponent.findではなくwrapper.findで検索する
expect(wrapepr.find('[data-test="V-Dialog"').toBeTruthy()

また、$vuetify.breakpointのような一部プロパティも必要があればmockにしておく Vuetifyはグロバルなオブジェクトとして$vuetifyを用意しているので必要最低限mockにする

// vue-utils-test内では画面幅の判定がうまくいかないことがあるのでmdを宣言しておく
mount(Component, {
    context: {
        root: {
             $vuetify: {
                  breakpoint: {
                    name: 'md'
              }
            }
        }
    }
})

参考

ユニットテスト — Vuetify (vuetifyjs.com)