VeeValidateをJestでテストする時に何か上手く行かないときに確認すること

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');などと指定すると、思ったタイミングでバリデートが実行されません。

インタラクションモードのテストはライブラリ側の責務なので、テスト時には指定する必要はないので取っ払います。

何かエラーが出るわけでもなく、ただテストのときだけ動かないので厄介でした…

参考：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');
  });
});