Dalam ujian unit API gabungan Vue 3, didapati bahawa $route tidak ditakrifkan dalam cangkuk onMounted()
P粉668146636
2023-08-26 08:54:29
<p>Saya mempunyai <code>onMounted()</code> dalam fungsi <code>setup()</code> yang mengakses <code>$params</code> ; tetapi apabila saya mengejek objek <kod>$laluan</kod> <kod>undefined</code>, jadi ralat dilemparkan. Berikut ialah kodnya: </p>
<p><strong>Component.vue:</strong></p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p><strong>component.spec.ts:</strong></p>
<pre class="brush:php;toolbar:false;">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')
})</pre>
<p><strong>Ralat Lemparan: </strong>
<p>Saya menggunakan versi vue-test-utils 2.0.0-rc.12. </p>
<p>Sebarang bantuan amatlah dihargai</p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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
matchedlaluan (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