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();
  });
}