vue test utils - тестирование props

Компонент: HelloWorld.vue

<script setup lang="ts">
defineProps<{
  msg: string
}>()
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

Задача:

• В папке src/components/ создайте файл HelloWorld.spec.ts
• Импортируйте компонент и функцию mount из @vue/test-utils.
• Напишите тест, который проверяет, что компонент корректно отображает переданное свойство msg.
• Используйте expect и .toBe() для проверки.

Решение:

import { mount } from '@vue/test-utils';
import Simple from '@/components/Simple.vue';

describe('HelloWorld.vue', () => {
    it('тестируем корректность переданных данных', () => {
        const wrapper = mount(Simple, {
            props: {
                msg: 'Hello World!'
            }
        });
        expect(wrapper.find('h1').text()).toBe('Hello World!')
    })
})

Объяснение решения:

• describe: Группирует связанные тесты. Первый аргумент — строка-описание группы.
• it (или test): Определяет отдельный тестовый случай. Первый аргумент — строка, описывающая, что должно произойти.
• mount: Функция из @vue/test-utils, которая "монтирует" компонент в изолированном DOM (jsdom). Возвращает "обертку" (wrapper) вокруг экземпляра компонента.
• wrapper.find(селектор): Ищет первый соответствующий элемент в шаблоне компонента. 
• .text(): Возвращает текстовое содержимое найденного элемента.
• expect(...).toBe(...): Утверждение. Сравнивает полученное значение с ожидаемым. toBe использует строгое равенство (===).