0

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: () => {}
}

.

Sheppard26
  • 181
  • 1
  • 4
  • 15

1 Answers1

0

It can be also mocked like this:

wrapper.vm.$el = {
    offsetWidth: 1200,
    offsetHeight: 1000
};
Alonad
  • 1,986
  • 19
  • 17
  • 1
    This won't work in the mounted hook - you don't have access to `wrapper.vm` until after the component is mounted. – Mike C Dec 01 '21 at 14:14