如何在Vitest中Mock Vue的RouterView/RouterLink（组合式API）？

问题分析 #

你遇到的核心问题是直接使用vi.mock('vue-router')会将RouterLink替换为无实际渲染逻辑的空组件，导致测试时输出空HTML，同时触发Vue的props类型验证警告。另外，测试HomeView的点击跳转属于验证Vue Router的内置功能，并非你的业务代码逻辑，应该聚焦于测试组件自身的参数传递和渲染行为。

解决方案 #

1. 正确Mock RouterLink组件 #

在测试文件中手动Mockvue-router，提供一个具备基础渲染能力的RouterLink实现，同时声明所需props以消除类型警告：

import { mount } from "@vue/test-utils";
import { describe, test, vi, expect } from "vitest";
import { RouteNames } from "@/router";
import ButtonRouterLink from "../ButtonRouterLink.vue";

// 手动Mock vue-router，提供RouterLink的基础实现
vi.mock('vue-router', () => ({
  RouterLink: {
    name: 'RouterLink',
    props: ['to', 'ariaCurrentValue'], // 声明需要接收的props，解决类型警告
    template: `<a data-testid="router-link" :href="JSON.stringify(to)"><slot /></a>`
  }
}));

describe("ButtonRouterLink", () => {
  test(`正确将'to'参数转换为RouterLink的props`, () => {
    const wrapper = mount(ButtonRouterLink, {
      props: {
        to: RouteNames.GAME,
        text: 'Start'
      }
    });

    // 验证RouterLink的to属性是否正确传递
    const routerLink = wrapper.find('[data-testid="router-link"]');
    expect(routerLink.attributes('href')).toBe(JSON.stringify({ name: RouteNames.GAME }));
    // 验证按钮文本内容
    expect(routerLink.text()).toBe('Start');
    // 生成快照验证整体渲染结果
    expect(wrapper.html()).toMatchSnapshot();
  });
});

2. HomeView的测试优化 #

HomeView的核心职责是正确渲染子组件并传递参数，无需测试路由跳转逻辑（这是Vue Router的内置功能，无需重复验证）。测试时只需确认ButtonRouterLink是否被正确传入目标路由参数：

import { shallowMount } from "@vue/test-utils";
import { describe, test, expect } from "vitest";
import { RouteNames } from "@/router";
import HomeView from "../../views/HomeView.vue";

describe("HomeView", () => {
  test(`正确渲染ButtonRouterLink并传入Game路由参数`, () => {
    const wrapper = shallowMount(HomeView);
    const buttonRouterLink = wrapper.findComponent({ name: 'ButtonRouterLink' });
    
    // 验证props是否正确传递
    expect(buttonRouterLink.props('to')).toBe(RouteNames.GAME);
    expect(buttonRouterLink.props('text')).toBe('Start');
  });
});

3. RouterView的Mock方案 #

如果需要测试包含RouterView的组件（比如App.vue），可以用类似的方式手动Mock：

vi.mock('vue-router', () => ({
  RouterView: {
    template: `<div data-testid="router-view"><slot /></div>`
  },
  // 按需Mock其他路由API，比如useRouter、useRoute
  useRouter: () => ({
    push: vi.fn()
  }),
  useRoute: () => ({
    name: RouteNames.HOME
  })
}));

关键要点 #

• 避免测试Vue Router的内置逻辑，专注于验证自身组件的参数传递、渲染行为。
• 手动Mock路由组件时，务必声明所需props，消除Vue的类型警告。
• 使用data-testid或组件名称定位元素，比依赖class选择器更稳定。

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