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
尝试访问name
from 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)
归档时间: |
|
查看次数: |
6418 次 |
最近记录: |