у меня есть такие компоненты
файл компонента src/features/AppLangSwitcher/ui/AppLangSwitcher.vue (здесь просто файл селекста с переключением языка)
<script lang="ts" setup>
import { useLangSwitcher } from '../model/useLangSwitcher.ts';
const langSwitcher = useLangSwitcher();
</script>
<template>
<div class="card flex justify-center">
<select v-model="langSwitcher.currentLang" class="form-select" @change="langSwitcher.changeLang">
<option v-for="lang in langSwitcher.allLang" :key="lang" :value="lang">
{{ lang }}
</option>
</select>
</div>
</template>
файл стора src/features/AppLangSwitcher/model/useLangSwitcher.ts (здесь логика переключения языка, наверное этот файл можно было не включать в вопрос, но на всякий случай)
import { defineStore } from 'pinia';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { appLs } from '@/shared/lib/AppLs';
import { i18n } from '@/shared/lib/i18n';
export const useLangSwitcher = defineStore('langSwitcher', () => {
const route = useRoute();
const allLang = ref(['en', 'ru']);
const lastLang = appLs.get<string>('appLang') || 'ru';
const currentLang = ref(lastLang);
async function loadLocaleMessages(locale: string, pageName: string) {
try {
const messages = await import(`@/shared/lib/i18n/locales/${locale}/${pageName}.json`);
i18n.global.locale = currentLang.value;
i18n.global.setLocaleMessage(locale, messages);
} catch (error) {
console.log('loadLocaleMessages error', error);
}
}
function changeLang() {
if (route?.name) {
appLs.set('appLang', currentLang.value);
loadLocaleMessages(currentLang.value, String(route.name));
}
}
return {
allLang,
currentLang,
changeLang,
loadLocaleMessages,
};
});
И файл теста src/features/AppLangSwitcher/ui/AppLangSwitcher.spec.ts
// @vitest-environment happy-dom
import { mount } from '@vue/test-utils';
import { createPinia, setActivePinia } from 'pinia';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { useLangSwitcher } from '../model/useLangSwitcher';
import AppLangSwitcher from './AppLangSwitcher.vue';
describe('lang Switcher', () => {
beforeEach(() => {
setActivePinia(createPinia());
});
it('should call changeLang when select value changes', async () => {
const langSwitcher = useLangSwitcher();
langSwitcher.changeLang = vi.fn();
const changeLangSpy = vi.spyOn(langSwitcher, 'changeLang');
const wrapper = mount(AppLangSwitcher);
const select = wrapper.find('select');
await select.setValue('en');
expect(langSwitcher.changeLang).toBeCalledTimes(1);
expect(langSwitcher.currentLang).toBe('en');
changeLangSpy.mockClear();
await select.setValue('ru');
expect(langSwitcher.changeLang).toBeCalledTimes(1);
expect(langSwitcher.currentLang).toBe('ru');
});
});
Сейчас все работает, но когда пытаюсь заменить нативный селект на селект от primeVue, вот изменения файла компонента "src/features/AppLangSwitcher/ui/AppLangSwitcher.vue"
<script lang="ts" setup>
import Select from 'primevue/select';
import { useLangSwitcher } from '../model/useLangSwitcher.ts';
const langSwitcher = useLangSwitcher();
</script>
<template>
<div class="card flex justify-center">
<Select v-model="langSwitcher.currentLang" :options="langSwitcher.allLang" placeholder="Select a Lang" @change="langSwitcher.changeLang" />
</div>
</template>
то в тестах появляется ошибка
× lang Switcher > should call changeLang when select value changes 42ms
→ Cannot read properties of undefined (reading 'config')