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

Question

我正在尝试在 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()
  })
})

你能帮帮我吗？ 谢谢

Answer 1

使用 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')