Vue test utils - Тестирование provide/inject

Компонент (Parent):

<template>
  <child-component />
</template>

<script setup>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

provide('theme', 'dark');
</script>

Компонент (ChildComponent):

<template>
  <p>Тема: {{ theme }}</p>
</template>

<script setup>
import { inject } from 'vue';
const theme = inject('theme');
</script>

Задание: Протестируйте ChildComponent, предоставив theme через global.provide - theme:'Red'. Проверьте, что отображается "Тема: Red".

global.provide в Vue Test Utils (VTU) используется для предоставления (provide) данных или зависимостей глобально для тестируемого компонента и всех его дочерних компонентов во время монтирования (mount).

Это позволяет вам:

1. Имитировать (mock) значения, которые обычно предоставляются родительскими компонентами выше в дереве, или даже из корня приложения (например, из app.config.globalProperties или через app.provide в main.js).
2. Переопределять значения, которые компонент ожидает получить через inject.
3. Тестировать поведение компонента в зависимости от различных значений, переданных через provide/inject, без необходимости монтировать все промежуточные родительские компоненты.

import { mount } from '@vue/test-utils';
import { it, describe, expect } from 'vitest';
import Provide from '@/components/provide/Child.vue';
describe('Parent.vue', () => {
    it("provide / inject test", () => {
        const wrapper = mount(Provide, {
            global: {
                provide: {
                    theme: 'Red'
                }
            }
        });
        console.log(wrapper.html());
        expect(wrapper.find('p').text()).toBe('Тема: Red')
    })
})