Vuetifyをインストールした環境でJestを実行する設定

Vuetifyをインストールした環境で、Jestを利用するときにしておいた方がいい設定です。

それぞれの設定は、tests/unitディレクトリに作成したsetup.jsを書きます。tests/unit/setup.jsの設定を反映するには、jest.config.jsに、以下を設定します。

jest.config.js

"setupFiles": ["./tests/unit/setup.js"]

警告を出力しない設定

[Vue warn]: Unknown custom element:〜

VuetifyのコンポーネントをJestが認識しないために出力される警告です。tests/unit/setup.jsに以下を設定することで出力されなくなります。

tests/unit/setup.js

import Vue from "vue";
import Vuetify from "vuetify";

Vue.use(Vuetify);

Download the Vue Devtools extension for a better development experience:〜

ブラウザの場合にVue Devtoolsの拡張機能をインストールすることを勧めるメッセージのようですが、Jestの環境には意味のないメッセージです。tests/unit/setup.jsに以下の設定をすることで出力されなくなります。

tests/unit/setup.js

Vue.config.devtools = false;

You are running Vue in development mode.〜

production環境へデプロイするときにproduction modeに切り替えることを注意するメッセージのようですが、これもテストの実行中には意味のないメッセージです。

tests/unit/setup.jsに以下の設定をすることで出力されなくなります。

tests/unit/setup.js

Vue.config.productionTip = false;

ボタンの置き替え

Vuetifyをインストールした環境では、buttonの見た目が変わってしまいます。下の図のように、ボタンの枠がなくなって、立体的に見えなくなっています。

以下のようにv-btnに置き換えることができます。

<v-btn id="vBtnClick" @click="onVbtnClick">v-btn</v-btn>

クリックされた場合に、onVbtnClickメソッドを呼び出すように設定しています。

ブラウザで実行した場合には、onVbtnClickメソッドが呼び出されます。しかし、以下のテストではonVbtnClickメソッドが呼び出されないで失敗します。

describe("v-btnがクリックしたときに、割り当てられたメソッドが呼び出されたことを確認する", () => {
  it("v-btnがクリックしたときに、割り当てられたメソッドが呼び出されたことを確認する", () => {
    const wrapper = shallowMount(SampleTextArea);
    const onVbtnClick = jest.fn();
    wrapper.setMethods({onVbtnClick});
    wrapper.find("#vBtnClick").trigger("click");
    expect(onVbtnClick).toHaveBeenCalledTimes(1);
  });
});

v-btnの設定を以下のように変えることでテストは成功します。

<v-btn id="vBtnClick" @click.native="onVbtnClick">v-btn</v-btn>