Мокинг useRoute () vue-router в тестах Jest в Vue 3

Я использую Vue 3 и Vue-Router для своего приложения, и у меня возникают проблемы при создании модульных тестов с помощью Jest для компонентов, которые используют useRoute(), например следующие:

<template>
    <div :class="{ 'grey-background': !isHomeView }" />
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
    setup: () => {
        const isHomeView = computed(() => {
            return useRoute().name === 'Home';
        });

        return {
            isHomeView,
        };
    },
});
</script>

Свойство computed использует useRoute(), и оно используется в шаблоне. Когда я провожу тест Jest для этого компонента, выдается ошибка TypeError: Cannot read property 'name' of undefined.

Я пробовал издеваться над useRoute вот так: jest.mock('vue-router', () => ({ useRoute: jest.fn() }));, а затем над beforeEach: useRoute.mockReturnValueOnce({ name: 'Home' });, но это не сработало.

Я не говорю о Vue 2, в котором маршрутизатор работает иначе, а о Vue 3.


typescript jestjs vue.js vuejs3 vue-router
person hnrd    schedule 09.12.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Проблема в том, что ваша фабричная функция (то есть в { useRoute: jest.fn() }) не имеет фиктивного возврата (т.е. она возвращает undefined), поэтому useRoute().name пытается получить доступ к name из undefined, что генерирует указанную вами ошибку.

Вы можете либо обновить фиктивную фабрику, чтобы вернуть объект со свойством name:

jest.mock('vue-router', () => ({
  useRoute: jest.fn(() => ({ name: 'Home' }))
}))

... или имитируйте их внутри тестов вместо использования фабрики:

jest.mock('vue-router')

describe('MyFoo.vue', () => {

  it('should have grey background for Home view', () => {
    require('vue-router').useRoute.mockReturnValueOnce({ name: 'Home' })
    const wrapper = shallowMount(MyFoo)
    expect(wrapper.html()).not.toContain('grey-background')
  })

  it('should not have grey background for non-Home view', () => {
    require('vue-router').useRoute.mockReturnValueOnce({ name: 'About' })
    const wrapper = shallowMount(MyFoo)
    expect(wrapper.html()).toContain('grey-background')
  })
})
person tony19    schedule 11.12.2020