Vue.js 类似于v-if的VueJS指令未通过单元测试（使用vue测试UTIL）

我试图创建一个行为类似于

v-if

的指令。基本上，如果条件为真，则元素应该存在，如果条件为假，则元素不应该存在。我还需要确保这些更改通过JEST测试。其目的是创建一个权限插件（因此我不需要使用

v-if=“$isAllowed（'edit'，'comments'）””

语法）

我已经看了电影和电影票。该指令起作用，因为它在呈现的DOM中用注释替换元素，但是在运行测试时，该元素仍然存在

该指令：

Vue.directive('allow', (el, binding, vnode) => {
  if (!isAllowed(binding.value)) {
    const comment = document.createComment(' ');
    Object.defineProperty(comment, 'setAttribute', {
      value: () => undefined,
    });
    vnode.elm = comment;
    vnode.text = ' ';
    vnode.isComment = true;
    vnode.context = undefined;
    vnode.tag = undefined;
    vnode.data.directives = undefined;

    if (vnode.componentInstance) {
      vnode.componentInstance.$el = comment;
    }

    if (el.parentNode) {
      el.parentNode.replaceChild(comment, el);
    }
  }
});

模板：

。。。
...

测试：

it('does not render element when user has no access to it', () => {
   expect(wrapper.find('[test-name="comment"]').exists()).toBeFalsy();
});

测试失败（表示组件存在）。但是，当我打印呈现的html（

console.log（wrapper.html（））；

）时，它会打印注释而不是组件