CODEWITHSUNDEEP
vue.jsvue-componentvue-test-utils
Harold
Harold

Reputation: 885

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.

Upvotes: 11

Views: 4561

Answers (2)

Alec Gerona
Alec Gerona

Reputation: 2897

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

import "@/plugins/filters";

...your test

Upvotes: 1

Edward
Edward

Reputation: 5248

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)

Upvotes: 20

Related Questions