Posted at

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' と指定して確認するようにしました。