Как тестировать 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 компоненты. Спасибо!


Ответы (0 шт):