I have a custom vue directive that is to be applied on a custom component. I am trying to write some unit tests for it with Jest but I’m having a hard time attaching the directive to the custom component in the unit test.

My unit test contains below:

wrapper = mount(RcInput, {
    global: {
        directives: {
            "rc-descriptor":RcDescriptor,
        },
    }
});

const input = wrapper.find('input');

My custom component contains:

div v-else-if="type === 'text' || type === 'password'"
        :class="['rcwc-input', `rcwc-${type}-input`]"
        v-rc-descriptor="{serviceUri: serviceUriForUnitTestOnly}" ######## Keep note of this line
    >
        <input
            :type="type"
            :value="modelValue || ''"
            :disabled="disabled"
            :required="required"
            :class="{ 'rcwc-error-input': error }"
            @input="onInput"
            @keydown="onKeydown"
            v-bind="$attrs"
        >
    </div>
    <div v-else />

For some reason I must also add the line:
v-rc-descriptor="{serviceUri: serviceUriForUnitTestOnly}" in the custom component in order for the unit test to even register the custom directive. I’ve read the documentation: https://test-utils.vuejs.org/api/#global-directives and I’m pretty sure I’m following the docs but I can’t seem to see why the component won’t event register the custom directive unless I specify that particular line.

What am I doing wrong?

As a follow up, suppose all I need is:

global: {
        directives: {
            "rc-descriptor":RcDescriptor,
        },
    }

How do I add the custom directive’s mock bindings?