Vueコンストラクタを外から渡せるようにしておくと便利

仕事でVueのコンポーネントのテストを書いていたんだけど、localVueつくっていくつかuseっていう↓みたいなコードをどのテストにも書かないといけなくて、どうにかなりませんかという気持ちになったという話。

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

import Foo from 'foo'
import Bar from 'bar'
import Baz from 'baz'

const localVue = createLocalVue()

localVue.use(Foo)
localVue.use(Bar)
localVue.use(Baz)

個別にuseして嬉しいこともあるんだろうけど、極端な話、これってプロダクトコードのVueとテストコードのlocalVueで全然違うものをuseしてる可能性もあるわけで、何より重複コードはまとめたい。新しくuseするものが増えたときに、全部に追記して回りたくないわけです。で、どうしたかと言うと、Vueのimportは上位で1回だけやって、それを引数で渡せるようにしておくと、テストでもlocalVueを渡せていいじゃんて感じです。

// plugins/index.ts

import { setupFilters } from './filters'
import { setupDirectives } from './directives'

export function setupPlugins (vue: Vue.VueConstructor) {
  setupFilters(vue)
  setupDirectives(vue)
}

// plugins/filters.ts

export function setupFilters (vue: Vue.VueConstructor) {
  vue.filter('price', (value: number) => {
    # ...
  })
}

import { setupPlugins } from '@/plugins'

// プロダクトコード
import Vue from 'vue'
setupPlugins(Vue)

// テストコード
const localVue = createLocalVue()
setupPlugins(localVue)

テストの内容によっては、単体テストとしてどうあるべきか、みたいな話もあるとは思いますが、個別にlocalVue.useする自由も残っているので、困るまではこれでいいかなという所です。