Vue test utils - Тестирование глобальных плагинов

<template>
  <p>{{ $t('greeting') }}</p>
</template>

<script setup>
// Предполагается, что $t — это метод i18n плагина
</script>

Задание: Подключите плагин vue-i18n и проверьте, что при

const messages = { en: {greeting: 'Hello!'}, ru: {greeting: 'Привет!'} }, при разных локалях, перевод работает

Сначала ставим vue-i18n в проект.

Решение:

import { mount } from '@vue/test-utils';
import { createI18n } from 'vue-i18n';
import { describe, it, expect } from 'vitest';
import i18 from '@/components/i18.vue';

const messages = {
    en: {
        greeting: 'Hello!'
    },
    ru: {
        greeting: 'Привет!'
    }
};

const i18n = createI18n({
    legacy: false,
    locale: 'en',
    fallbackLocale: 'en',
    messages
});

describe('i18.vue', () => {
    it('should render translated greeting in English', () => {
        const wrapper = mount(i18, {
            global: {
                plugins: [i18n]
            }
        });

        expect(wrapper.text()).toContain('Hello!');
    });

    it('should render translated greeting in Russian', () => {
        i18n.global.locale.value = 'ru';

        const wrapper = mount(i18, {
            global: {
                plugins: [i18n]
            }
        });

        expect(wrapper.text()).toContain('Привет!');
    });
});