使用Vitest与Vue-Test-Utils模拟Vue-Router遇错求助

我正在尝试理解Vitest模拟Vue-Router的逻辑，在一个简单项目中搭建测试环境并进行模拟操作。按照Vue-Test-Utils官方文档步骤执行时始终报错，怀疑是文档使用Jest导致的差异。虽然使用真实Vue-Router可以解决问题，但我更倾向于采用模拟方式。以下是项目源码、报错信息以及我已尝试的模拟方法，请求帮助解决：

Home.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>

Home.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()
})

问题出在仅模拟vue-router模块但未给useRoute返回包含query属性的对象，组件在onMounted中访问route.query时会因route无对应属性报错。

正确的模拟方式需要让useRoute返回符合预期的对象，具体修改如下：

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

// 模拟vue-router并指定useRoute的返回值
vi.mock('vue-router', () => ({
  useRoute: vi.fn(() => ({
    query: {} // 可根据测试需求设置具体参数，比如{ id: '123' }
  }))
}))

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

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

关键说明： #

• vi.mock的工厂函数需返回包含useRoute的对象，且useRoute要返回带query属性的对象，匹配组件对route的使用逻辑。
• 若需在测试中动态修改query值，可手动调用mock方法修改返回值：

  import { useRoute } from 'vue-router'
  
  // 在测试用例中
  const mockUseRoute = useRoute as vi.Mock
  mockUseRoute.mockReturnValue({ query: { id: '456' } })
  

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