Configuring filters with vue-test-utils

Question

How can we configure a component mount with a globally applied filter? I assume it would be some options passed to createLocalVue, but I don't see it in the docs.

With a global filter in use, I get the following warning in the console when running a suite:

[Vue warn]: Failed to resolve filter: filterName

The string at wrapper.html() includes the precomputed value, with the filter not applied, e.g.

{{ 'a string' | throughFilter }}

is still

'a string'

The filter works in the browser, and it tests on its own as a function, but I don't want to ship code with warnings.

Answer 1

createLocalVue returns a Vue constructor, which includes the filter method for registering filters:

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

const localVue = createLocalVue()

localVue.filter('myFilter', myFilter)

mount(TestComponent, {
  localVue
})

Alternatively you could install the filter globally on the Vue constructor before mounting your component:

import Vue from 'vue'

Vue.filter('myFilter', myFilter)

mount(TestComponent)

Answer 2

You can also import your filter script if you're using it that way a la Nuxt.

import "@/plugins/filters";

...your test