Dans le test unitaire API combiné de Vue 3, il a été constaté que $route n'était pas défini dans le hook onMounted()

Question

J'ai un hook onMounted() dans la fonction setup() ;, mais lorsque je me moque de l'objet $route dans mon test, le $routeonMounted() undefined, donc une erreur est générée. Voici le code :

Component.vue :

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

component.spec.ts :

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')
})
 Erreur générée : 
J'utilise vue-test-utils version 2.0.0-rc.12. 
Toute aide serait grandement appréciée

Answer 1

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