Vue-Test-Utils & Vitest를 사용한 Vue-Router 모크

나는 Vite로 Vue-Router를 조롱하는 논리를 이해하려고 한다.

이를 위해 저는 매우 간단한 프로젝트에서 테스트 환경을 설정하고 조롱하려고 했습니다.Vue-Test-Utils의 공식 문서대로 진행하려고 하면 항상 오류가 발생하였습니다.그들이 Jest를 써서 그런지는 모르겠다.

실제 vue-router를 사용하면 문제가 해결되지만 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() })