lundi 14 décembre 2020

Vue Test Utils - Cannot read property '$el' - $refs

I am trying to test a component that has a VNavigationMenu with a $ref='drawer' on it. When I want to mount the component to a wrapper via. mount and shallowMount it throwns an error TypeError: Cannot read property '$el' of undefined and points to a method of my component:

setBorderWidth () {
  const i = this.$refs.drawer.$el.querySelector(
    '.v-navigation-drawer__border'
  )
  i.style.width = this.navigation.borderSize + 'px'
  i.style.cursor = 'ew-resize'
}

and that is the VNavigationMenu that's causing the problem

<v-navigation-drawer
  ref='drawer'
  v-model='drawer'
  :clipped='$vuetify.breakpoint.lgAndUp'
  app
>

my test, it happens right when I want to mount the component

  test('mounting the component', async () => {
    const wrapper = shallowMount(MainView, {
      localVue
    })
  })

I've tried everything i could find on stackoverflow or github, it just doesn't work.. I hope you guys can help me out.

Aucun commentaire:

Enregistrer un commentaire