Simulation Vue-Router utilisant Vue-Test-Utils et Vitest-Questions et réponses sur le réseau chinois PHP

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

 importer {onMounted} depuis "vue" ; importer {useRoute} depuis "vue-router" ; const route = useRoute() onMounted(() => { console.log(route.query) })   Accueil

首页.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() }) vite.config.ts
 ///  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 } }) 我的错误消息如下：..
 我尝试过的方法
 我尝试像下面这样模拟 vue-router
 vi.mock('vue-router', () => ({ useRoute : vi.fn(), })) 或者只是
 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() })

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: '

' }, 'router-view': { template: '

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

répondre à tous (1)

P粉2949544472023-08-26 00:01:26 1 plancher

Tout d'abord, j'espère qu'enHome.vue中看到router-link或router-view:

Par conséquent,Home.spec.tsdevrait 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: '' }, 'router-view': { template: '' }, }, }, }); 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)