Dans le test unitaire API combiné de Vue 3, il a été constaté que $route n'était pas défini dans le hook onMounted()
P粉668146636
P粉668146636 2023-08-26 08:54:29
0
1
475
<p>J'ai un hook <code>onMounted()</code> dans la fonction <code>setup()</code> ;, mais lorsque je me moque de l'objet <code>$route</code> dans mon test, le <code>$route</ dans le <code>onMounted()</code> <code>undefined</code>, donc une erreur est générée. Voici le code : </p> <p><strong>Component.vue :</strong></p> <pre class="brush:php;toolbar:false;"><template> <div>{{ this.$route.params.id }}</div> </modèle> <script lang="ts"> importer {defineComponent, onMounted} depuis 'vue' importer {useRoute} depuis "vue-router" ; exporter le composant défini par défaut ({ nom : 'Composant', installation() { const route = useRoute() onMounted(() => { console.log(route.params.id) }) retour {} } }) </script></pre> <p><strong>component.spec.ts :</strong></p> <pre class="brush:php;toolbar:false;">importer {mount} depuis "@vue/test-utils" ; importer un composant depuis "@/views/Bundle/Component.vue" ; test('description du test', async() => { const mockRoute = { paramètres : { Identifiant : 1 } } const mockRouter = { pousser : plaisanterie.fn() } const wrapper = mount (Composant, { mondial: { se moque : { $route : mockRoute, $router : mockRouter } } }) attendre wrapper.find('bouton').trigger('clic') })</pré> <p><strong> Erreur générée : </strong> <p>J'utilise vue-test-utils version 2.0.0-rc.12. </p> <p>Toute aide serait grandement appréciée</p>
P粉668146636
P粉668146636

répondre à tous(1)
P粉739079318

Le problème est que lors de l'utilisation de l'API composite, les options de montage (et donc aussi la simulation de $route et $router) ne sont pas prises en compte.

Par exemple, lorsque vous regardez la propriété matchedd'une route (dans un composant), le tableau sera vide car il n'y a pas de route correspondante et aucun contexte de routage disponible. Mais ils ont mis à jour la documentation et vous pouvez y voir un exemple.

Je me demande s'il existe un moyen non impératif de simuler chaque test...

Routage simulé à l'aide de l'API de composition

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal