How to mock $el property in JEST vue-test-utils?

Question

How to mock $el property (points to component's HTML element) when testing component? I need to have an access to mocked $el in mounted() hook. Solution below does not work.

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

//Edit

Ok I found a workaround for this.

If you need access to this.$parent or this.$el in created/mounted hook, just write a getter method in methods and next, mock it in your wrapper and replace this.$parent / this.$el by mocked method.

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

.

Answer 1

It can be also mocked like this:

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