Jest中Vue自定义指令单元测试问题及绑定模拟咨询

问题描述 #

我有一个需应用于自定义Vue组件的自定义指令，尝试使用Jest为其编写单元测试，但在测试中无法将指令附加到组件。

单元测试代码 #

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

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

自定义组件代码片段 #

<div v-else-if="type === 'text' || type === 'password'"
     :class="['rcwc-input', `rcwc-${type}-input`]"
     v-rc-descriptor="{serviceUri: serviceUriForUnitTestOnly}" <!-- 注意此行 -->
>
    <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 />

奇怪的是，必须在自定义组件中添加v-rc-descriptor="{serviceUri: serviceUriForUnitTestOnly}"这一行，单元测试才能识别该自定义指令。已查阅Vue Test Utils文档，确认遵循了文档要求，但无法找出原因。请问我哪里操作有误？

另外，若仅通过以下代码全局注册指令，该如何添加自定义指令的模拟绑定？

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

问题解答 #

1. 为什么必须在组件模板中显式添加指令？ #

全局注册指令的作用是让组件无需局部导入就能使用该指令，但它不会自动将指令应用到组件的任意元素上。只有当组件模板中明确写出v-rc-descriptor指令时，Vue Test Utils才会将注册的指令逻辑绑定到对应的DOM元素上。

你之前的误解在于：全局注册只是提供指令的定义，组件模板里没有使用指令的话，测试环境自然不会触发指令的任何逻辑。所以必须在组件模板中显式使用指令，测试才能检测到它的存在。

2. 全局注册指令时，如何添加模拟绑定？ #

有两种可行方案：

方案一：通过组件Props控制指令绑定值

修改组件代码，将指令的绑定值改为依赖组件Props，这样测试时可以传入模拟值：

<!-- 组件模板 -->
<div v-else-if="type === 'text' || type === 'password'"
     :class="['rcwc-input', `rcwc-${type}-input`]"
     v-rc-descriptor="{serviceUri: serviceUri}"
>
<!-- ... 其余代码不变 -->
</div>

// 组件脚本
export default {
  props: {
    serviceUri: {
      type: String,
      default: ''
    },
    // ... 其他Props
  }
}

测试时传入模拟的绑定值：

wrapper = mount(RcInput, {
  global: {
    directives: {
      "rc-descriptor": RcDescriptor,
    },
  },
  props: {
    serviceUri: 'test-mock-service-uri',
    type: 'text' // 确保渲染包含指令的div分支
  }
});

方案二：测试中手动触发指令钩子

如果不想修改组件模板，可以在测试中找到目标元素后，手动调用指令的生命周期钩子并传入模拟绑定值：

wrapper = mount(RcInput, {
  global: {
    directives: {
      "rc-descriptor": RcDescriptor,
    },
  },
  props: {
    type: 'text' // 确保渲染目标div
  }
});

// 找到应用指令的div元素
const targetDiv = wrapper.find('div.rcwc-input');
// 获取全局注册的指令定义
const directive = wrapper.vm.$options.directives['rc-descriptor'];

// 根据Vue版本调用对应钩子：
// Vue2 调用bind钩子
directive.bind(targetDiv.element, { value: { serviceUri: 'test-mock-service-uri' }}, wrapper.vnode, null);

// Vue3 调用mounted钩子
directive.mounted(targetDiv.element, { value: { serviceUri: 'test-mock-service-uri' }}, wrapper.vnode, null);

内容的提问来源于stack exchange，提问作者Mark