@vue/test-utils执行shallowMount遇<router-view>未知组件，已有方案无效求解决

针对你遇到的这个测试警告，结合你的代码和使用的依赖版本，我整理了几个可行的修复步骤：

1. 为router-view添加Stub #

虽然你的Home.vue组件里没有直接使用<router-view>，但警告说明测试过程中某个组件（可能是Vuetify内部组件或全局注册的组件）尝试渲染它。你只需要在挂载选项的stubs中添加router-view的Stub就能消除这个警告：

let wrapper = shallowMount(Home, {
  localVue,
  vuetify, // 后续步骤会说明这个实例的初始化
  stubs: {
    RouterLink: RouterLinkStub,
    'router-view': true // 新增这一行Stub路由视图
  }
});

2. 正确初始化Vuetify实例 #

在你使用的@vue/test-utils旧版本中，仅通过localVue.use(Vuetify)注册Vuetify是不够的，需要显式创建Vuetify实例并传入挂载选项：

// 在beforeEach中新增Vuetify实例初始化
beforeEach(() => {
  localVue = createLocalVue();
  localVue.use(VueRouter);
  vuetify = new Vuetify(); // 创建Vuetify实例
});

然后在shallowMount时将这个实例传入：

let wrapper = shallowMount(Home, {
  localVue,
  vuetify, // 传入Vuetify实例
  stubs: {
    RouterLink: RouterLinkStub,
    'router-view': true
  }
});

3. 模拟Vue Router的$router对象（可选） #

你的v-btn使用了:to属性（依赖Vue Router的路由跳转功能），即使Stub了RouterLink，有时也需要模拟$router对象来避免潜在的路由相关警告：

let wrapper = shallowMount(Home, {
  localVue,
  vuetify,
  stubs: {
    RouterLink: RouterLinkStub,
    'router-view': true
  },
  mocks: {
    $router: {
      push: () => {} // 模拟路由push方法
    }
  }
});

完整修复后的测试代码 #

import { shallowMount, createLocalVue, RouterLinkStub } from '@vue/test-utils';
import VueRouter from 'vue-router';
import Vuetify from 'vuetify';
import expect from 'expect';
import Home from '../../pages/Home.vue';

describe('Home.vue', () => {
  let localVue;
  let vuetify; // 新增Vuetify实例变量

  beforeEach(() => {
    localVue = createLocalVue();
    localVue.use(VueRouter);
    vuetify = new Vuetify(); // 初始化Vuetify实例
  });

  it('renders the Home page component', () => {
    let wrapper = shallowMount(Home, {
      localVue,
      vuetify,
      stubs: {
        RouterLink: RouterLinkStub,
        'router-view': true
      },
      mocks: {
        $router: {
          push: () => {}
        }
      }
    });
    expect(wrapper.html()).toContain('<h2>Bem-vindo (a) ao Cadastro Nacional de Informações Espeleológicas - CANIE</h2>');
  });
});

额外说明 #

你使用的@vue/test-utils@1.0.0-beta.31是比较老旧的版本，和新版Vuetify可能存在兼容性问题。如果上述步骤仍未解决问题，可以尝试：

• 确认Vuetify版本和Vue、Vue Router版本匹配（Vue 2对应Vuetify 2.x系列）
• 检查是否有全局注册的组件干扰了测试环境，尽量通过createLocalVue保持测试环境的隔离

内容的提问来源于stack exchange，提问作者Marcelo Fonseca