11

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.

Harold
  • 845
  • 1
  • 9
  • 17
  • 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 Feb 23 '21 at 15:50

2 Answers2

20

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)
Edward
  • 5,148
  • 2
  • 29
  • 42
1

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

import "@/plugins/filters";

...your test
Alec Gerona
  • 2,806
  • 1
  • 24
  • 24