gpt4 book ai didi

vue.js - 使用 RouterLinkStub 进行 Vue 快照测试不会按预期呈现 anchor

转载 作者:行者123 更新时间:2023-12-05 07:12:40 24 4
gpt4 key购买 nike

我正在尝试在 Vue 应用程序中运行 jest-snapshot 测试,该应用程序的组件带有 router-link元素。
我正在使用 RouterLinkStub按照 Snapshot Testing with Vue-Router 中的建议

我的组件模板是这样的

<template>
<section class="content">
<div>
<router-link to="/" v-slot="{ href, route, navigate }">
<a :href="href" @click="navigate">
Homepage
</a>
</router-link>
</div>
</section>
</template>

问题是在快照中,router-link呈现为空 anchor 元素 ( <a /> ),因此如果我更改链接文本,快照测试仍然会通过。

这是我的快照测试:

import { RouterLinkStub, shallowMount } from '@vue/test-utils'

import PageNotFound from 'views/PageNotFound.vue'

describe('PageNotFound.vue', () => {
it('renders as expected', () => {
const wrapper = shallowMount(PageNotFound, {
stubs: {
RouterLink: RouterLinkStub
}
})

expect(wrapper.element).toMatchSnapshot()
})
})

你能帮帮我吗?谢谢

最佳答案

使用 Vue 3

 import { shallowMount, RouterLinkStub } from '@vue/test-utils'
import router from '../../router'

const findComponentRouterLink = () =>
wrapper.findComponent(RouterLinkStub)

const wrapper = shallowMount(Component, {
global: {
plugins: [router],
stubs: {
RouterLink: RouterLinkStub,
},
},
})

findComponentRouterLink().text()).toBe('Link text')

关于vue.js - 使用 RouterLinkStub 进行 Vue 快照测试不会按预期呈现 anchor ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60382364/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com