Vue-test-utils: Document filter options

[marczych]

I was testing a component that used a filter that I wanted to stub out because the output of the filter wasn't important. I didn't see this functionality in the docs anywhere nor did I see it when I grepped through this repo so I decided to implement this feature. I started by writing tests but much to my surprise they passed before I implemented the functionality!

It looks like filters is a valid option despite it not being documented or even allowed based on the flow type definition. This test case passes:

it('stubs only the requested filter', () => {
  const wrapper = mount(ComponentWithFilter, {
    filters: {
      filterA (value) {
        return `stubFilterA(${value})`
      }
    }
  })
  expect(wrapper.html()).to.equal('<div>\n    stubFilterA(value)\n    filterB(value)\n</div>')
})

component-with-filter.vue:

<template>
    <div>
        {{ value | filterA }}
        {{ value | filterB }}
    </div>
</template>

<script>
    export default{
      name: 'component-with-filter',
      filters: {
        filterA (value) {
          return `filterA(${value})`
        },
        filterB (value) {
          return `filterB(${value})`
        }
      },
      data () {
        return {
          value: 'value'
        }
      }
    }
</script>

I think that this happens implicitly on this line but I'm not sure: https://github.com/vuejs/vue-test-utils/blob/3c563d12735b8eab7529d32494f0955e0c51a294/src/lib/create-instance.js#L57

---

Should this behavior be documented and officially supported?

[eddyerburgh]

As you said, all options are passed to the Constructor. This means users can pass any instances for plugins, like i18n, to the instance.

You're right, we should have more information in the docs about this so that it's more clear that you can pass the same options you normally pass when you create a vue instance. We also need to improve type definitions to allow this.

[eddyerburgh]

There is some detail on this in the docs — https://vue-test-utils.vuejs.org/en/api/options.html

Does anyone want to improve on the information that exists?

[eddyerburgh]

Closing as there seems to be no interest. If anyone would like more information, could you please give an example of what kind of information could make this more clear

[38elements]

Since I think it is better that there is an example and description for extends in document, I sent a pull request.

[jxiaox]

In my case, i get error TypeError: _vue2.default.filter(...) is not a function.
First, I have a global filter toUpperCase, and I use it in my component

const upperCaseVal = Vue.filter('toUpperCase')('test');

and test specs

const localVue = createLocalVue();
const wrapper = shallow(TestComponent, {
      store,
      localVue,
    });

It is no error in npm start, how to config the filter options?

[eddyerburgh]

If you want to register a filter you can either register on localVue or the global Vue class:

Vue.filter('toUpperCase', toUpperCase)

localVue.filter('toUpperCase', toUpperCase)

[MFRamon]

@eddyerburgh worked for me as well, thanks !