在 Vue 3 的 Jest 测试中模拟 vue-router 的 useRoute()

Question

我正在为我的应用程序使用 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属性为 using 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。

Answer 1

问题是您的工厂函数（即 in { useRoute: jest.fn() }）没有指定模拟返回（即它返回undefined），因此useRoute().name尝试访问namefrom 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')
  })
})