Vue Test UtilsでVuetifyをユニットテストする
Vue-CLIを用いてVuetifyのUIコンポーネントをユニットテストするときの手順についてメモ。
基本的な手順は公式に従う。
公式Guide(https://vue-test-utils.vuejs.org/)
環境
- Vue-CLIでプロジェクトを作成
- オプションで
Unit Testing
を選択 vue add vuetify
でVuetifyを追加
setup.tsの追加
Unit Testはメインアプリとは独立して動作するため、VuetifyをVueグローバルにインストールする必要がある。
tests/unit配下にsetup.ts
を追加し、以下を記述する。
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
このセットアップファイルを読み込む設定をpackage.json (もしくはjest.config.js) に追加する。
{
"jest": {
"setupFiles": [ "./tests/unit/setup.ts" ]
}
}
Unit Testの作成
あとは公式に従ってテストを作成しよう。
注意点としては、Vuetifyの部品はそれぞれがコンポーネントなので、shallowMountで下位コンポーネントをスタブ化するとテストが行えない。
Vuetify UIのテストをするときはmountを使おう。
import ...
// shallowMountだとv-btnの中身がマウントされない
const wrapper = mount(Button, {
propsData: { name: "button" }
});
describe("Button.vue", () => {
it("ボタンの存在確認", () => {
expect(wrapper.find(".v-btn").exists()).toBeTruthy();
});
}