typescript - Failed to resolve component: router-link warning - Stack Overflow

admin管理员组

文章数量:1310519

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.

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.

• typescript
• vuejs3
• vitest

Share Improve this question Follow edited Feb 3 at 14:08 DarkBee 15.6k88 gold badges7272 silver badges117117 bronze badges asked Feb 3 at 14:08 imqqmiimqqmi 47322 silver badges99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

本文标签： typescriptFailed to resolve component routerlink warningStack Overflow