Vuetifyをインストールした環境でJestを実行する設定
Vuetifyをインストールした環境で、Jestを利用するときにしておいた方がいい設定です。
それぞれの設定は、tests/unitディレクトリに作成したsetup.jsを書きます。tests/unit/setup.jsの設定を反映するには、jest.config.jsに、以下を設定します。
"setupFiles": ["./tests/unit/setup.js"]
警告を出力しない設定
[Vue warn]: Unknown custom element:〜
VuetifyのコンポーネントをJestが認識しないために出力される警告です。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に以下の設定をすることで出力されなくなります。
Vue.config.devtools = false;
You are running Vue in development mode.〜
production環境へデプロイするときにproduction modeに切り替えることを注意するメッセージのようですが、これもテストの実行中には意味のないメッセージです。
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>
Author And Source
この問題について(Vuetifyをインストールした環境でJestを実行する設定), 我々は、より多くの情報をここで見つけました https://qiita.com/kubotama/items/c3931fb9145f5021d39a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .