Search code examples
vue.jsvue-componentvue-test-utils

Configuring filters with vue-test-utils


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.


Solution

  • 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)