RouterLink.useLink is missing when using RouterLinkStub.

[rudolfbyker]

Subject of the issue

RouterLink.useLink is missing when using RouterLinkStub.

Steps to reproduce

1. Set up an empty project with Vite + Vitest + Vue3 + Vuetify3 + Vue Test Utils.
2. Use VBtn with the to prop somewhere, e.g. MyComponent.vue:

   <template>
     <v-btn to="home">Home</v-btn>
   </template>

3. Use RouterLinkStub in a test:

   // @vitest-environment jsdom
   
   import { mount, RouterLinkStub } from "@vue/test-utils";
   import { createVuetify } from "vuetify";
   import MyComponent from "./MyComponent.vue";
   
   test("MyComponent", async () => {
     mount(MyComponent, {
       global: {
         stubs: {
           RouterLink: RouterLinkStub,
         },
         plugins: [createVuetify()],
       },
     });
   });

Expected behaviour

MyComponent is mounted in the test, and VBtn works.

Actual behaviour

TypeError: RouterLink.useLink is not a function.

Possible Solution

Include the RouterLink.useLink function in the stub, since it seems to be part of the API.

[cadriel]

This may be more of a Vuetify issue, since Vuetify uses useLink and the errors are thrown from Vuetify components.

In any case, I'm also having this issue. Its frustrating because you can't stub RouterLink anywhere because it breaks tests.

[rudolfbyker]

This may be more of a Vuetify issue

It seems like RouterLinkStub is breaking the API contract, not Vuetify. But I might be mistaken.

[Finrod927]

I had the same issue, and manage to make it work by extending the stub and mocking useLink.

But I had to move the new stub to config.global.mocks, probably because of the new mocked function? Or not? 🤔😅

// Import vue test utils functions and stubs
import { RouterLinkStub, config } from '@vue/test-utils'

// Global stubs
const RouterLinkStb = { ...RouterLinkStub, useLink: vi.fn() }

// Define plugins, mocks, stubs...
config.global.stubs = {
  // Stub is not working here, still the same issue "RouterLink.useLink is not a function"
  // RouterLink: RouterLinkStb,
}

config.global.mocks = {
  // No more errors here, and tests are OK
  RouterLink: RouterLinkStb
}