Unit testing 如何在测试期间模拟v-t vue-i18n指令以返回密钥

我使用的是vue-i18n和v-t指令。在组件的单元测试中，我希望能够测试按钮或其他组件是否提供了正确的语言键

我可以很容易地模拟$t函数，方法是：

config.mocks = {
  $t: (key) => key
};

但我不能用v-t做同样的事情。这不会将键填充到元素的innerText或innerHTML中：

  localVue.directive('t', (el: HTMLElement, key: any) => {
    return key.value;
  });

有人知道如何模仿v-t指令来做这样的事情吗

---

我正在安装而不是浅装正在测试的部件

我找到了答案。我很接近，我错误地认为我在localVue上创建的mock指令必须返回一些东西，它所需要做的就是设置传递给它的元素的innerText。这就是真正的v-t指令所做的，实际上，我认为它设置了innerHtml

最后，我们要做的是：

按如下方式定义mock指令： 在测试中，假设div上有一个包含v-t指令的类，请执行以下操作 为完整起见，假设您的vue组件如下所示：

<template>
  <div v-t='label' v-if="label" class="divclass"></div>
</template>

<script lang="ts">

import Vue from 'vue'
export default Vue.extend({
  inheritAttrs: false,
  name: 'MyLabelDiv',
  props: ['label']
})
</script>

在这里，组件接受一个名为label的道具，该道具被假定为语言键。如果设置了标签属性，则div存在并将包含由key标识的语言字符串

  const div = wrapper.find('.divclass');
  expect(div.element.innerText).toBe('key');

<template>
  <div v-t='label' v-if="label" class="divclass"></div>
</template>

<script lang="ts">

import Vue from 'vue'
export default Vue.extend({
  inheritAttrs: false,
  name: 'MyLabelDiv',
  props: ['label']
})
</script>