解决 Vitest 中 RouterLink Stub 文本渲染问题：完整指南

vue.js

2024-03-12 15:48:47

Vitest 中 RouterLink Stub 文本渲染故障排除

导言

在使用 Vitest 测试包含 href 属性的 Vue 组件时，您可能会遇到 RouterLink Stub 无法显示预期文本的问题。本文将深入探讨此问题，并提供有效的解决方案，帮助您克服此障碍。

问题

当在测试中使用 Vitest 的 RouterLinkStub 组件时，该组件可能不会呈现预期的文本内容。尽管该组件正常模拟 RouterLink 的导航行为，但文本内容却缺失。

原因分析

RouterLink Stub 是 Vitest 提供的组件，用于在单元测试中模拟 RouterLink 的行为。虽然它能够有效处理导航逻辑，但它本身并不渲染任何文本。这是因为 RouterLinkStub 默认没有文本插槽。

解决方法

为了使 RouterLinkStub 组件显示文本，您需要在测试中提供一个 default 插槽，该插槽将定义显示的文本内容。可以通过在测试组件的 slots 对象中添加一个名为 default 的插槽来实现。如下所示：

const wrapper = shallowMount(Button, {
  props: {
    buttonText: 'Go to Home',
    href: '/home',
  },
  slots: {
    default: 'Go to Home',
  },
  stubs: {
    RouterLink: RouterLinkStub,
  },
});

示例

it('renders a router-link when href prop is provided', () => {
  const wrapper = shallowMount(Button, {
    props: {
      buttonText: 'Go to Home',
      href: '/home',
    },
    slots: {
      default: 'Go to Home',
    },
    stubs: {
      RouterLink: RouterLinkStub,
    },
  });

  // 检查组件是否正确渲染为 router-link
  expect(wrapper.findComponent(RouterLink).exists()).toBe(true);

  // 检查 router-link 是否具有正确的 'to' prop
  expect(wrapper.findComponent(RouterLink).props().to).toBe('/home');

  // 检查 router-link 文本是否正确
  const routerLinkComponent = wrapper.findComponent(RouterLink);
  expect(routerLinkComponent.html().toContain('Go to Home')).toBe(true);
});