Как подружить primeVue и vitest?

Question

[raving]

у меня есть такие компоненты
файл компонента 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')

Answer 1

[Евгений]

как вариант ShallowMount и не маунтить и не проверять вообще поведение селекта. А только логику внутри конкретного компонента. Тогда возможно тест станет тривиальным. Но и сейчас это уже интеграционный тест, а не юнит - т.к. проверяется в том числе стор и сторонний ui компонент. Либо копать в сторону мокирования каких-то внутренних состояний primevue - нейронки вам в помощь