Как тестировать route из useRoute компонента на composition api?
Тестирование компонентов с использование composition api vuejs3
Не могу тестировать компонент, который использует router или route из библиотеки vue-router в тесте vue-test-utils, mocka, chai. Мой компонент написан с использования синтаксиса composition api <script setup>
При попытке запустить тест компонента, столкнулся с следующей проблемой: route не существует внутри wrapper. Вот пример ошибки/неправильного поведения: TypeError: Cannot read properties of undefined (reading 'path').
Я уже попробовал заглушать route вот так:
let wrapper
const route = { path: '/hello' }
beforeEach(() => {
wrapper = mount(HelloWorld, {
props: {
msg: 'Hello!'
},
global: {
mocks: {
route
}
}
})
})
Это сработало для такого компонента HelloWorld.vue:
<script setup>
import { useRoute } from 'vue-router';
defineProps({
msg: {
type: String,
required: true
}
})
const route = useRoute();
</script>
<template>
<div class="greetings">
<h1 class="green">{{ route.path }}</h1>
<h1 class="green">{{ msg }}</h1>
</div>
</template>
Но не сработало для такого, почему?
<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
defineProps({
msg: {
type: String,
required: true
}
})
const route = useRoute();
const path = computed(() => {
return route.path;
})
</script>
<template>
<div class="greetings">
<h1 class="green">{{ path }}</h1>
<h1 class="green">{{ msg }}</h1>
</div>
</template>
Я ожидал, что тесты будут проходить в обоих случая, но вместо этого для второго теста получаю TypeError: Cannot read properties of undefined (reading 'path').
Буду благодарен за любые советы или рекомендации по решению проблемы тестирования compositon api компоненты. Спасибо!