Configuring filters with vue-test-utils

8
votes

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.

2
vue.jsvue-componentvue-test-utils
Re what options can be passed to createLocalVue: I had a similar situation so I just checked the source code of that method, and the only option it takes is errorHandler (which is documented). - Velizar Hristov

2 Answers

13
votes

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)
1
votes

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

import "@/plugins/filters";

...your test