Simulation Vue-Router utilisant Vue-Test-Utils et Vitest

Question

J'essaie de comprendre la logique de se moquer de Vue-Router avec Vitest.

Pour ce faire, j'ai essayé de configurer et de simuler mon environnement de test sur un projet très simple. Lorsque j'essaie de suivre la documentation officielle de Vue-Test-Utils, j'obtiens toujours une erreur. Je ne sais pas si c'est parce qu'ils utilisent Jest.

L'utilisation d'un vrai vue-router a résolu mon problème, mais je pense que se moquer de vue-router est mieux.

Ci-dessous, je vais d'abord transmettre le code source du projet, puis les erreurs que j'ai reçues.

Accueil.vue

<configuration du script lang="ts">
importer {onMounted} depuis "vue" ;
importer {useRoute} depuis "vue-router" ;

const route = useRoute()

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

<modèle>
  <div>Accueil</div>
</template>

首页.spec.ts

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

importer Home depuis "../src/components/Home.vue"

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

    attendre(wrapper.exists()).toBeTruthy()
})</pré>
<h3>vite.config.ts</h3>
<pre class="brush:php;toolbar:false;">/// <reference types="vitest" />
importer {defineConfig} depuis 'vite'
importer la vue depuis '@vitejs/plugin-vue'

// https://vitejs.dev/config/
exporter la définition par défaut ({
  plugins : [vue()],
  test: {
    environnement : 'jsdom',
    inclure : ['./test/**/*.spec.ts'],
    exclure : ['node_modules', 'dist'],
    globales : vrai
  }
})</pré>
<h3>我的错误消息如下：..</h3>


<h3>我尝试过的方法</h3>
<p>我尝试像下面这样模拟 vue-router</p>
<pre class="brush:php;toolbar:false;">vi.mock('vue-router', () => ({
    useRoute : vi.fn(),
}))</pré>
<p>或者只是</p>
<pre class="brush:php;toolbar:false;">vi.mock('vue-router')

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

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

importer Home depuis "../src/components/Home.vue"

vi.mock('vue-router')

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

    attendre(wrapper.exists()).toBeTruthy()
})

Answer 1

Tout d'abord, j'espère qu'en 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>

Par conséquent, Home.spec.ts devrait ressembler à ceci :

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

Quelques commentaires/suggestions :

• Utilisez des descriptions pour définir le contexte du test
• Définir une fonction globale pour monter des composants, réutiliser au lieu de dupliquer
• Utilisez .spyOn() 和 .mockImplementation...() pour la surveillance et la simulation
• Utilisez une manière structurée/directe d'écrire des tests, tels que AAA [organiser, agir, affirmer] ou GWT [donné, quand, alors]. Je le teste depuis quelques années et je l'utilise toujours, cela m'aide à comprendre ce que je teste
• Utilisez .toHaveBeenCalled...() pour vérifier si la simulation fonctionne comme prévu
• mount() 函数中的存根应与模板中使用的组件相关（因此，如果您不使用 , il ne doit pas être répertorié comme talon)

J'espère que cela vous aidera, acclamations!