Dalam ujian unit API gabungan Vue 3, didapati bahawa $route tidak ditakrifkan dalam cangkuk onMounted()

Question

Saya mempunyai onMounted() dalam fungsi setup() yang mengakses $params ; tetapi apabila saya mengejek objek $laluan undefined, jadi ralat dilemparkan. Berikut ialah kodnya:

Component.vue:

<template>
  <div>{{ this.$route.params.id }}</div>
</template>

<skrip lang="ts">
import {defineComponent, onMounted} daripada 'vue'
import {useRoute} daripada "vue-router";

eksport lalai defineComponent({
  nama: 'Komponen',
  persediaan() {
    laluan const = useRoute()
    onMounted(() => {
      console.log(route.params.id)
    })

    kembali {}
  }
})
</script>

component.spec.ts:

import {mount} daripada "@vue/test-utils";
import Komponen daripada "@/views/Bundle/Component.vue";

test('keterangan ujian', async () ==> {
  const mockRoute = {
    params: {
      ID: 1
    }
  }
  const mockRouter = {
    tolak: jest.fn()
  }

  pembungkus const = lekapkan(Komponen, {
    global: {
      mengejek: {
        $route: mockRoute,
        $router: mockRouter
      }
    }
  })

  tunggu wrapper.find('button').trigger('click')
})

Ralat Lemparan:

Saya menggunakan versi vue-test-utils 2.0.0-rc.12.

Sebarang bantuan amatlah dihargai

Answer 1

Masalahnya ialah apabila menggunakan API komposit, pilihan pelekap (dan oleh itu juga simulasi $route dan $router) tidak diambil kira.

Sebagai contoh, apabila anda melihat sifat matched laluan (dalam komponen), tatasusunan akan kosong kerana tiada laluan yang sepadan dan tiada konteks penghalaan tersedia. Tetapi mereka mengemas kini dokumentasi dan anda boleh melihat contoh di sana.

Saya tertanya-tanya jika ada cara yang tidak penting untuk mensimulasikan setiap ujian...

Penghalaan olok-olok menggunakan API komposisi