使用Jest+Vue-Test-Utils测试时，<router-link>组件识别失败求助

我之前在Vue+TypeScript项目里用Jest做测试时，也碰到过完全一样的找不到的问题，结合你的场景，给你几个靠谱的解决方向：

1. 确保VueRouter正确注入到localVue并传入挂载配置 #

这是最常见的原因——你可能已经创建了localVue，但忘了调用use方法安装路由，或者挂载组件时没把router和localVue一起传进去。

示例代码如下：

import { createLocalVue, mount } from '@vue/test-utils';
import VueRouter from 'vue-router';
import YourComponent from '@/components/YourComponent.vue';

// 创建localVue实例
const localVue = createLocalVue();
// 关键步骤：给localVue安装VueRouter
localVue.use(VueRouter);
// 初始化测试用的路由实例（可以为空数组，或者配置测试需要的路由）
const router = new VueRouter({ routes: [] });

// 挂载组件时必须同时传入localVue和router
const wrapper = mount(YourComponent, {
  localVue,
  router,
  propsData: {
    // 传入你的组件需要的props，比如你的temp属性
    temp: { url: '/test-page', name: '测试页面' }
  }
});

注意：如果只传localVue不传router，或者反过来，都会导致无法被识别。

2. 快速替代方案：存根组件 #

如果你不需要测试路由跳转的逻辑，只是想让组件正常渲染通过测试，可以直接存根，不用引入VueRouter：

import { mount } from '@vue/test-utils';
import YourComponent from '@/components/YourComponent.vue';

const wrapper = mount(YourComponent, {
  stubs: {
    // 简单存根，让组件忽略router-link的存在
    'router-link': true,
    // 或者自定义存根模板，模拟显示内容
    // 'router-link': '<a><slot></slot></a>'
  },
  propsData: {
    temp: { url: '/test-page', name: '测试页面' }
  }
});

这个方法适合只关注组件其他逻辑的测试场景，能快速解决找不到组件的报错。

3. TypeScript相关的小检查 #

确保你的TypeScript配置没有遗漏路由的类型声明：

• 安装VueRouter的类型依赖：npm install @types/vue-router --save-dev
• 检查vue-shim.d.ts文件是否有正确的Vue组件类型声明：

  declare module '*.vue' {
    import Vue from 'vue';
    export default Vue;
  }
  

内容的提问来源于stack exchange，提问作者Chad Carter