Simulasi Vue-Router menggunakan Vue-Test-Utils dan Vitest

Question

Saya cuba memahami logik mengejek Vue-Router dengan Vitest.

Untuk melakukan ini, saya cuba menyediakan dan mensimulasikan persekitaran ujian saya pada projek yang sangat mudah. Apabila saya cuba mengikuti dokumentasi rasmi Vue-Test-Utils, saya sentiasa mendapat ralat. Saya tidak tahu sama ada kerana mereka menggunakan Jest.

Menggunakan vue-router sebenar telah menyelesaikan masalah saya, tetapi saya fikir mengejek vue-router adalah lebih baik.

Di bawah saya akan mula-mula menyampaikan kod sumber projek, dan kemudian ralat yang saya terima.

Home.vue

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

laluan const = useRoute()

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

<template>
  <div>Rumah</div>
</template>

首页.spec.ts

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

import Laman Utama daripada "../src/components/Home.vue"

it('Ujian Rumah', async () => {
    pembungkus const = mount(Home)

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

vite.config.ts

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

// https://vitejs.dev/config/
eksport defineConfig lalai ({
  pemalam: [vue()],
  ujian: {
    persekitaran: 'jsdom',
    termasuk: ['./test/**/*.spec.ts'],
    kecualikan: ['node_modules', 'dist'],
    globals: benar
  }
})

我的错误消息如下：..

我尝试过的方法

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

vi.mock('vue-router', () => ({
    useRoute: vi.fn(),
}))</pra>
<p>或者只是</p>
<pre class="brush:php;toolbar:false;">vi.mock('vue-router')

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

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

import Laman Utama daripada "../src/components/Home.vue"

vi.mock('vue-router')

it('Ujian Rumah', async () => {
    pembungkus const = mount(Home, {
        global: {
            tunas: ["pautan-penghala", "paparan-penghala"]
        }
    })

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

Answer 1

Pertama sekali, saya berharap dalam 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>

Jadi, Home.spec.ts sepatutnya kelihatan seperti ini:

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();
  });
});

Beberapa komen/cadangan:

• Gunakan penerangan untuk menentukan konteks ujian
• Tentukan fungsi global untuk melekapkan komponen, menggunakan semula dan bukannya pendua
• Gunakan .spyOn() 和 .mockImplementation...() untuk pemantauan dan simulasi
• Gunakan beberapa cara berstruktur/langsung untuk menulis ujian, seperti AAA [susun, bertindak, tegaskan] atau GWT [diberi, bila, kemudian]. Saya telah mengujinya selama beberapa tahun dan masih menggunakannya, ia membantu saya memahami perkara yang saya uji
• Gunakan .toHaveBeenCalled...() untuk menyemak sama ada simulasi berfungsi seperti yang diharapkan
• mount() 函数中的存根应与模板中使用的组件相关（因此，如果您不使用 , ia tidak sepatutnya disenaraikan sebagai rintisan)

Semoga ini membantu, sorakan!