Vue test utils — attrs

В Vue Test Utils метод attrs используется для проверки атрибутов, которые были переданы компоненту, но не являются его пропсами.

Когда вы монтируете компонент с помощью mount, любые атрибуты, которые вы передаёте ему (например, data-*, id, class, aria-* и т.д.), и которые не определены как props в этом компоненте, Vue Test Utils автоматически добавляет к корневому элементу компонента.

Метод wrapper.attributes() позволяет получить эти атрибуты, чтобы можно было протестировать, что они были корректно переданы и установлены.

Компонент (UserCard.vue):

<template>
  <div class="user-card" :id="id" :class="type">
    <h3>{{ title }}</h3>
    <p>{{ description }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserCard',
  props: {
    id: String,
    title: String,
    description: String,
    type: String
  }
}
</script>

Задание:

Создайте тест для UserCard.vue. Используйте опцию attrs при mount, чтобы передать HTML-атрибут data-testid со значением "user-card-element". Напишите проверку, что этот атрибут присутствует на корневом элементе div компонента.

Решение

import { mount } from "@vue/test-utils";
import { expect, test } from "vitest";
import UserCard from '@/components/UserCard.vue';

test('UserCard - тестрирование атрибутов через attrs', () => {
    const wrapper = mount(UserCard, {
        props: {
            title: "test card",
            description: "test card description"
        },
        attrs: {
            'data-testid': 'user-card-element'
        }
    })
    
    expect(wrapper.attributes('data-testid')).toBe('user-card-element')
  
})