Search code examples
vuejs3vue-router

Cannot destructure property 'isActive' of 'undefined' as it is undefined

Using script setup in vue3, I have code like this in template

   ...
          <router-link
            v-for="t in tas"
            :key="t.text"
            custom
            :to="`/dashboard/${t.type}`"
            v-slot="{ isActive, navigate }"
          >
            <div
              :class="{ active: isActive }"
              @click="navigate"
            >
              {{ t.text }}
            </div>
          </router-link>
   ...

Its throwing error TypeError: Cannot destructure property 'isActive' of 'undefined' as it is undefined. when running a simple test

  it('match snapshot', () => {
    const wrapper = shallowMount(MYView, {
      stubs: ['router-link'],
    });
    expect(wrapper.html()).toMatchSnapshot();
  });
Solution

  • You need to stub it using RouterLinkStub, see https://test-utils.vuejs.org/api/#routerlinkstub