Vueのcomponentのテストでのあれこれ

injectのモックしたい場合

何もしないとこんなエラーになりますね。

[Vue warn]: Injection "$validator" not found

解決方法

-> mountするときに、provide を使いましょう。
https://vue-test-utils.vuejs.org/ja/api/options.html#provide

const Component = {
  inject: [ '$validator' ],
  template: '<div>{{this.foo()}}</div>'
}
const $validator = jest.fn();

const wrapper = shallowMount(Component, {
  provide: {
    $validator,
  }
})

カスタムディレクティブをモックしたいとき

こんなエラーが出たとき

[Vue warn]: Failed to resolve directive: validate

解決方法

-> mountするときに localvue を使いましょう
https://vue-test-utils.vuejs.org/ja/api/options.html#localvue

import { createLocalVue, mount } from '@vue/test-utils';

const localVue = createLocalVue();
localVue.directive('validate', () => {});

const wrapper = mount(Component, {
  localVue,
  propsData: {
    name: 'hogehoge', 
  }
});