如何用Vitest测试验证HTML标签的属性值？

这类测试有没有必要？ #

绝对有必要。这属于组件渲染正确性的基础验证，比如公共导航组件里的链接、产品卡片的图片路径，一旦代码迭代时不小心改错，用户就会点错链接或看不到图片。这类测试能帮你在开发阶段就揪出这类问题，完全不是无用功。

Vitest能不能做这事？ #

当然可以。Vitest配合Vue官方的@vue/test-utils工具库，就能轻松拿到DOM元素并验证属性，这是很常规的单元测试场景。

直接上测试示例（Vue 3 + Vitest + @vue/test-utils） #

先看一个简单的组件LinkCard.vue：

<template>
  <div class="link-card">
    <h2>{{ title }}</h2>
    <a :href="linkUrl" class="card-link">{{ linkText }}</a>
    <img :src="imageSrc" :alt="imageAlt" />
  </div>
</template>

<script setup>
defineProps({
  title: String,
  linkUrl: String,
  linkText: String,
  imageSrc: String,
  imageAlt: String
})
</script>

对应的测试文件LinkCard.spec.js：

import { mount } from '@vue/test-utils'
import LinkCard from './LinkCard.vue'

describe('LinkCard组件测试', () => {
  // 定义测试用的props数据
  const testProps = {
    title: 'Vue官方文档',
    linkUrl: 'https://vuejs.org/',
    linkText: '前往官网',
    imageSrc: '/images/vue-logo.png',
    imageAlt: 'Vue Logo'
  }

  it('验证链接的href属性和文本', () => {
    const wrapper = mount(LinkCard, { props: testProps })
    // 用CSS选择器找到目标a标签
    const linkElement = wrapper.find('a.card-link')
    // 检查href属性是否符合预期
    expect(linkElement.attributes('href')).toBe(testProps.linkUrl)
    // 顺便验证链接文本
    expect(linkElement.text()).toBe(testProps.linkText)
  })

  it('验证图片的src和alt属性', () => {
    const wrapper = mount(LinkCard, { props: testProps })
    const imgElement = wrapper.find('img')
    // 检查图片路径和替代文本
    expect(imgElement.attributes('src')).toBe(testProps.imageSrc)
    expect(imgElement.attributes('alt')).toBe(testProps.imageAlt)
  })

  it('验证标题文本渲染正确', () => {
    const wrapper = mount(LinkCard, { props: testProps })
    expect(wrapper.find('h2').text()).toBe(testProps.title)
  })
})

核心API说明 #

• wrapper.find(selector)：通过CSS选择器定位组件内的DOM元素
• element.attributes(attrName)：获取元素的指定属性值，不传参数会返回该元素的所有属性对象
• element.text()：获取元素的文本内容

额外提醒 #

• 先装依赖：需要安装@vue/test-utils，执行npm install -D @vue/test-utils就行
• 别越界：这类测试只验证属性值是否符合预期，不用测试链接能不能打开、图片能不能加载——那是端到端（E2E）测试的范畴

内容的提问来源于stack exchange，提问作者Henry