vue-test-utilsでVuetifyのコンポーネントを確認する方法

vue-test-utilsで単体テストを書く際に、Vuetifyのコンポーネントが存在するかfindしたい場合に、コンポーネントクラスが指定できなかったのでメモ。

前提

ライブラリのバージョンは以下で確認しました。

• vue: 2.5.17
• vuetify: 1.3.11
• @vue/test-utils: 1.0.0-beta.26

実装

以下のようなコンポーネントが実装されているとして、vue-test-utilsを利用してテストを書きます。

hoge.vue

<template>
  <v-select v-model="selectItem" :items="items"></v-select>
</template>

<script lang="ts">
  import {
    Component,
    Emit,
    Prop,
    Vue,
  } from 'vue-property-decorator';
  
  @Component({
    components: {},
  })
  export default class Hoge extends Vue {
    @Prop() public items!: string[];
    @Prop() public value!: string;

    @Emit()
    public input(auther: string) { /* */ }

    private get selectItem(): string {
      return this.value;
    }

    private set selectItem(value: string) {
      this.input(value);
    }
  }
</script>

import { expect } from 'chai';
import { shallowMount } from '@vue/test-utils';
import Hoge from '@/hoge.vue';
import { VSelect } from 'vuetify/lib';

describe('Hoge.vue', () => {
  it('ダイアログが表示されるか', () => {
    const items = ['hoge1', 'hoge2'];
    const wrapper = shallowMount(Hoge, {
      propsData: {
        items: items,
        value: '',
      },
    });

    # NG(パラメータに指定できない)
    expect(wrapper.findAll(VSelect)).to.length(1);

    # OK
    expect(wrapper.findAll('v-select-stub')).to.length(1);
    expect(wrapper.attributes().items).to.equal('hoge1,hoge2');
  });
});

element-uiだとコンポーネントクラスをパラメータに割当できるのですが、Vuetifyの場合、指定できなかったので、やむを得ず`xxx-stub' と指定して確認するようにしました。