使用 Vue-Test-Utils 和 Vitest 進行 Vue-Router 模擬

Question

我試著理解用 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()
})

Answer 1

首先，我希望在 Home.vue 中看到 router-link 或 router-view：

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

const route = useRoute();

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

<template>
  <router-link to="home">Go to home</router-link>
  <router-view />
</template>

因此，Home.spec.ts 應該是這樣的：

import { expect, it, vi } from 'vitest';
import { mount } from '@vue/test-utils';
import * as VueRouter from 'vue-router';
import Home from '../src/components/Home.vue';

describe('./path/to/Home.vue', () => {
  const useRouteSpy = vi.spyOn(VueRouter, 'useRoute');
  const getWrapper = () => mount(Home as any, {
    global: {
      stubs: {
        'router-link': { template: '<div/>' },
        'router-view': { template: '<div/>' },
      },
    },
  });

  it('the component should be mounted', () => {
    // ARRANGE
    const useRouteMock = useRouteSpy.mockImplementationOnce({ query: 'query' });
    // ACT
    const wrapper = getWrapper();
    // ASSERT
    expect(useRouteMock).toHaveBeenCalled();
    expect(wrapper.exists()).toBeTruthy();
  });
});

一些評論/建議：

• 使用描述來界定測試上下文
• 定義一個全域函數來掛載元件，重複使用而不是重複
• 使用 .spyOn() 和 .mockImplementation...() 進行監視和模擬
• 使用某種結構化/直接的方式來編寫測試，例如 AAA [安排、行動、斷言] 或 GWT [給定、何時、然後]。我已經測試了幾年並且仍在使用它，它可以幫助我了解我正在測試的內容
• 使用 .toHaveBeenCalled...() 檢查模擬是否如預期運作
• mount() 函數中的存根應與範本中使用的元件相關（因此，如果您不使用，它不應該被列為存根）

希望有幫助， 乾杯！