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