Vue-test-utils: Custom directives support?

[probil]

What problem does this feature solve?

It should allow to test custom directive. I've registered a directive on the instance and called $update on wrapper but bind function was not called. Also, I can't find anything related to directives in the docs/tests.
It seems like directives are not supported at all right now.
Any plan to support them?

What does the proposed API look like?

I suppose that directives will just work on the vue instance.

[eddyerburgh]

You can register custom directives on the Vue base class, or a localVue class:

const localVue = createLocalVue()

localVue.directive('setText',  sertTextDirective)

const wrapper = shallow(Component, {
  localVue
})

https://jsfiddle.net/smsjfz5r/4/

[probil]

Thanks @eddyerburgh :+1:
Fixed by passing localVue to the shallow and mount options

[rehandialpad]

While this does indeed work, the directives themselves don't seem to work properly because the el does not seem to have any properties except for _prevClass. Its missing key properties like innerText, innerHtml, etc
Example:

{
  inserted: function(el, binding) {
      console.log(el) // logs "HTMLDivElement { _prevClass: 'vai-summary-header-text-primary' }" 

      const untranslated = el.innerText; // untranslated is undefined!!!

      const value = binding.value || {};

      el.innerText = translate.get(untranslated, value);
    }
}

This directive works perfectly fine in the browser, but breaks in the test environment

[eddyerburgh]

Can you provide a reproduction in CodeSandBox @rehandialpad and create a new issue?

[chrisnicola]

@eddyerburgh it would be great if this could be done globally via the config rather than during each mount.

Edit: Ok so I realize now that you can do this on the global Vue instance. My mistake.

[builder7777]

The directives are basically ignored in shallowMount:

    const mockedDirective = {
      bind(el: any, binding: any) {
        console.log('bind', el, binding);
      },
      inserted(el: any, binding: any) {
        console.log('inserted', el, binding);
      },
      update(el: any, binding: any) {
        console.log('update', el, binding);
      },
    };

    wrapper = shallowMount(TheFormField, {
      localVue,
      directives: {
        testdirective: mockedDirective,
      },
   });

in my component i have: v-testdirective="'testData'" and nothing gets logged when running the tests

[gmbarroso]

You can register custom directives on the Vue base class, or a localVue class:

const localVue = createLocalVue()

localVue.directive('setText',  sertTextDirective)

const wrapper = shallow(Component, {
  localVue
})

https://jsfiddle.net/smsjfz5r/4/

I know that this issue is closed, but I want to say thanks anyway. This helped me a lot :smile:

[vincerubinetti]

If anyone stumbled upon this issue and is looking for how to do this in the latest Vue 3 testing utils, here's the docs (they weren't exactly easy to find):
https://vue-test-utils.vuejs.org/v2/api/#global-directives

I have a Table component that uses a v-tooltip directive, and here's my testing code based on the above docs, which seems to work:

import Table from "@/components/Table.vue";
import { directive } from "@/util/tooltip";

const props = ...;
const global = {
  directives: {
    tooltip: directive
  }
};
const wrapper = mount(Table, { props, global });

[afontcu]

here's the docs (they weren't exactly easy to find):

Hi, thank you for the feedback! Any suggestion on how to improve docs? We still have to write the Reusability & Composition section, and searching for "Directives" yields a single result with the link you provided. Happy to hear about improvements, though :)