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

hnr*_*nrd 7 typescript vue.js jestjs vue-router vuejs3

我正在为我的应用程序使用 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>
Run Code Online (Sandbox Code Playgroud)

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。

ton*_*y19 13

问题是您的工厂函数(即 in { useRoute: jest.fn() })没有指定模拟返回(即它返回undefined),因此useRoute().name尝试访问namefrom undefined,这会生成您提到的错误。

您可以更新模拟工厂以返回具有属性的对象name

jest.mock('vue-router', () => ({
  useRoute: jest.fn(() => ({ name: 'Home' }))
}))
Run Code Online (Sandbox Code Playgroud)

...或者在测试中模拟它们而不是使用工厂:

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')
  })
})

Run Code Online (Sandbox Code Playgroud)