シングルページアブリ(SPA)を作るための有名なフレームワークに、Vue.js, React, Angularがあります。 これからプロジェクトに採用したり勉強するなら、どちらが良いのかGoogleト…
VeeValidateのテストを書こうとした時にどうも上手く行かないときに確認することです。
jest.config.jsの設定を見直す
実行時に警告が出てくる場合は、以下の設定をjest.config.js
に追加しましょう。
webpackを導入しているならpackage.json
に記載してもOKです。
transform: { ... 'vee-validate/dist/rules': 'babel-jest', }, transformIgnorePatterns: [ '<rootDir>/node_modules/(?!vee-validate/dist/rules)', ],
参考:Testing Caveats | VeeValidate
https://logaretm.github.io/vee-validate/advanced/testing.html#asynchronous-testing
setup時にVeeValidateのコンポーネントを読み込む
jestのテスト環境を構築するとき、テスト実行前に初期化のためにsetup.js等を用意しているはずです。
そこでVeeValidateのコンポーネントを読み込みます。
※テスト対象のコンポーネントで毎回、ValidationProviderやValidationObserverを読み込んでいれば不要です。
setup.jsを作る
場所はどこでも良いので分かりやすいようにtests直下に作成します。
/tests/setup.js
import Vue from 'vue'; import { ValidationProvider, ValidationObserver } from 'vee-validate'; Vue.config.productionTip = false; // vee-validate Vue.component('ValidationProvider', ValidationProvider); Vue.component('ValidationObserver', ValidationObserver);
次にjest.config.js
に作成したsetup.jsを読み込むように指定します。
/jest.config.js
module.exports = { setupFilesAfterEnv: [ './tests/setup.js' ], transform: { 'vee-validate/dist/rules': 'babel-jest', }, transformIgnorePatterns: [ '<rootDir>/node_modules/(?!vee-validate/dist/rules)', ], };
インタラクションモードが指定されていないか見直す
私がハマっていたのがこれです。
VeeValidateにはどのタイミングでバリデートを実行するのか設定できます。
何も考えずテスト用の設定でもsetup.jsでsetInteractionMode('eager');
などと指定すると、思ったタイミングでバリデートが実行されません。
required指定したinpu要素のvalueを空文字に変更!
あれ?エラーメッセージが出ないぞ?
インタラクションモードのテストはライブラリ側の責務なので、テスト時には指定する必要はないので取っ払います。
何かエラーが出るわけでもなく、ただテストのときだけ動かないので厄介でした…
参考:Interaction and UX | VeeValidate
https://logaretm.github.io/vee-validate/guide/interaction-and-ux.html#interaction-modes
バリデートは非同期で実行される
VeeValidateは非同期で実行されます。
例えば、必須ルールのrequiredのテストであればvalueを空にしたあとにpromiseが捌けるのを待つ必要があります。
$nextTickで処理するのが基本ですが、flushPromises
のプラグインを使うと簡潔に記述できます。
参考 非同期動作のテスト | Vue Test Utils
https://vue-test-utils.vuejs.org/ja/guides/testing-async-components.html
flushPromisesをインストールする
パッケージ管理アプリから追加します。
flush-promises – npm
https://www.npmjs.com/package/flush-promises
必須テストコードのサンプル
・非同期処理なのでメソッドは非同期メソッドとして定義する
import { createLocalVue, mount } from '@vue/test-utils'; import TestInput from '@/components/core/TestInput'; import flushPromises from 'flush-promises'; describe('TestInput.vue', () => { const localVue = createLocalVue(); test('必須エラーチェック', async () => { const wrapper = mount(TestInput, { localVue, propsData: { value: 'defaultValue', }, }); const textInput = wrapper.find('[data-test="testInput"]'); textInput.setValue(''); await flushPromises(); const error = wrapper.find('[data-test="testInputError']'); expect(error.text()).toMatch('require'); }); });
コメントを書く