[SOLVED] Failed to resolve component: router-link warning

Failed to resolve component: router-link warning

I've been struggling for days with this one. AI gave me examples of how to do this in vue2 but not in vue3, or it tries but fails.

I've tried mocking this element, stubbing it etc. But most examples and ai answers are correct for vue2 and don't work for vue3.

Solution

The key is that you have to set the stub for router-link up in config.global.stubs in vue3:

//setup.ts
import {RouterLinkStub, config } from "@vue/test-utils";

config.global.stubs = {
    RouterLink: RouterLinkStub,
}

Add this to the vite.config.mjs file so that the dom is available, and load the setup.ts file on every test run.

//vite.config.mjs
...
test: {
    environment: 'jsdom',
    // change the path below to to the location of your setup.ts file:
    setupFiles: path.resolve(__dirname, './resources/ts/Test/setup.ts'),
}
...

I have router-links in a AuthenticatedLayout.vue file that's included with many 'page' vue files. This resulted in hundreds of warnings during vitest, though the tests all passed. With this method they are gone.

Hopefully this will help others struggling to get rid of those warnings.