如何在JEST vue-test-utils中模拟$ el属性？

Question

在测试组件时如何模拟$el属性（指向组件的HTML元素）？我需要访问$el挂钩中的模拟mounted()。以下解决方案不起作用。

const wrapper = shallowMount(Component, {
     mocks: {
            $el: { 
               //some properties 
            }
     }
})

//编辑

好的，我找到了解决方法。

如果您需要访问已创建/挂接的钩子中的this.$parent或this.$el，只需在方法中编写一个getter方法，然后在包装中对其进行模拟并替换this.$parent / {{ 1}}的模拟方法。

this.$el

。

Answer 1

它也可以像这样被嘲笑：

wrapper.vm.$el = {
    offsetWidth: 1200,
    offsetHeight: 1000
};