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

【问题标题】：How to mock $el property in JEST vue-test-utils?如何在 JEST vue-test-utils 中模拟 $el 属性？
【发布时间】：2020-06-08 06:34:33
【问题描述】：

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

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

//编辑

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

如果您需要在 created/mounted 钩子中访问 this.$parent 或 this.$el，只需在方法中编写一个 getter 方法，然后在包装器中模拟它并用模拟方法替换 this.$parent/this.$el。

const wrapper = mount(Component, 
methods: { 
   getEl: () => {}
}

【问题讨论】：

【解决方案1】：

也可以这样模拟：

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

【讨论】：