我试图理解用 Vitest 模拟 Vue-Router 的逻辑。

为此，我尝试在一个非常简单的项目上设置并模拟我的测试环境。当我尝试按照Vue-Test-Utils的官方文档进行操作时，总是出现错误。我不知道是不是因为他们使用 Jest。

使用真正的 vue-router 解决了我的问题，但我认为模拟 vue-router 更好。

下面我先传达一下项目的源码，然后是我收到的错误。

首页.vue

<script setup lang="ts">
import {onMounted} from "vue";
import {useRoute} from "vue-router";

const route = useRoute()

onMounted(() => {
  console.log(route.query)
})
</script>

<template>
  <div>Home</div>
</template>

首页.spec.ts

import {expect, it, vi} from "vitest";
import {mount} from "@vue/test-utils";

import Home from "../src/components/Home.vue"

it('Home Test', async () => {
    const wrapper = mount(Home)

    expect(wrapper.exists()).toBeTruthy()
})

vite.config.ts

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom',
    include: ['./test/**/*.spec.ts'],
    exclude: ['node_modules', 'dist'],
    globals: true
  }
})

我的错误消息如下：..

我尝试过的方法

我尝试像下面这样模拟 vue-router

vi.mock('vue-router', () => ({
    useRoute: vi.fn(),
}))

或者只是

vi.mock('vue-router')

这是我的最终 Home.spec.ts 文件

import {expect, it, vi} from "vitest";
import {mount} from "@vue/test-utils";

import Home from "../src/components/Home.vue"

vi.mock('vue-router')

it('Home Test', async () => {
    const wrapper = mount(Home, {
        global: {
            stubs: ["router-link", "router-view"]
        }
    })

    expect(wrapper.exists()).toBeTruthy()
})