Имитация Vue RouterView/RouterLink в Vitest (API композиции)

Судя по заголовку, это вообще возможно?

Я пытаюсь протестировать простой компонент приложения Vue, который содержит заголовок и кнопку, которая направляет пользователя на следующую страницу. Я хочу проверить, что после нажатия кнопок событие/сообщение отправляется на маршрутизатор, и проверьте правильность маршрута назначения.

Структура приложения:

App.Vue — компонент входа

<script setup lang = "ts">
import { RouterView } from "vue-router";
import Wrapper from "@/components/Wrapper.vue";
import Container from "@/components/Container.vue";
import HomeView from "@/views/HomeView.vue";
</script>

<template>
  <Wrapper>
    <Container>
      <RouterView/>
    </Container>
  </Wrapper>
</template>

<style>

  body{
    @apply bg-slate-50 text-slate-800 dark:bg-slate-800 dark:text-slate-50;
  }

</style>

router/index.ts — файл конфигурации Vue Router

import {createRouter, createWebHistory} from "vue-router";
import HomeView from "@/views/HomeView.vue";

export enum RouteNames {
    HOME = "home",
    GAME = "game",
}

const routes = [
    {
      path: "/",
      name: RouteNames.HOME,
      component: HomeView,
      alias: "/home"
    },
    {
      path: "/game",
      name: RouteNames.GAME,
      component: () => import("@/views/GameView.vue"),
    },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

export default router;

HomeView.Vue — представление входа для RouterView в компоненте приложения.

<template>
  <Header title = "My App"/>
  <ButtonRouterLink :to = "RouteNames.GAME" text = "Start" class = "btn-game"/>
</template>

<script setup>
  import Header from "@/components/Header.vue";
  import ButtonRouterLink from "@/components/ButtonRouterLink.vue";
  import {RouteNames} from "@/router/";
</script>

ButtonRouterLink.vue

<template>
<RouterLink v-bind:to = "{name: to}" class = "btn">
  {{ text }}
</RouterLink>
</template>

<script setup>
import { RouterLink } from "vue-router";

const props = defineProps({
  to: String,
  text: String
})
</script>

Учитывая, что он использует CompositionAPI, TypeScript, есть ли способ издеваться над маршрутизатором в тестах Vitest?

Вот пример структуры тестового файла (HomeView.spec.ts):

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

describe("Home", () => {
    test ('navigates to game route', async () => {
        // Check if the button navigates to the game route

        const wrapper = shallowMount(HomeView);

        await wrapper.find('.btn-game').trigger('click');

        expect(MOCK_ROUTER.push).toHaveBeenCalledWith({ name: RouteNames.GAME });
    });
});

Я пробовал несколько способов: vi.mock('vue-router'), vi.spyOn(useRoute,'push'), библиотеку vue-router-mock, и мне всегда не удавалось запустить тесты вроде роутера просто нет.

Обновление (15.04.23)

Следуя совету @tao, я понял, что тестирование щелчка в HomeView не очень хороший тест (тестирование библиотек, а не моего приложения), поэтому я добавил тест для ButtonRouterLink, чтобы увидеть, правильно ли он отображает Vue RouterLink, используя to параметр:

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

vi.mock('vue-router');

describe("ButtonRouterLink", () => {
    test (`correctly transforms 'to' param into a router-link prop`, async () => {
       
        const wrapper = mount(ButtonRouterLink, {
            props: {
                to: RouteNames.GAME
            }
        });

        expect(wrapper.html()).toMatchSnapshot();
    });
});

Что отображает пустую строку HTML ""

exports[`ButtonRouterLink > correctly transforms 'to' param into a router-link prop 1`] = `""`;

сопровождается довольно бесполезным предупреждением Vue (ожидаемые типы не указаны):

[Vue warn]: Invalid prop: type check failed for prop "to". Expected , got Object  
  at <RouterLink to= { name: 'game' } class = "btn btn-blue" > 
  at <ButtonRouterLink to = "game" ref = "VTU_COMPONENT" > 
  at <VTUROOT>
[Vue warn]: Invalid prop: type check failed for prop "ariaCurrentValue". Expected , got String with value "page". 
  at <RouterLink to= { name: 'game' } class = "btn btn-blue" > 
  at <ButtonRouterLink to = "game" ref = "VTU_COMPONENT" > 
  at <VTUROOT>
[Vue warn]: Component is missing template or render function. 
  at <RouterLink to= { name: 'game' } class = "btn btn-blue" > 
  at <ButtonRouterLink to = "game" ref = "VTU_COMPONENT" > 
  at <VTUROOT>