NuxtN
Nuxt13mo ago
Yuri

Unit Test OnMounted

My component:
import { debounce, upperCase } from 'lodash'
import type { ILocationCitySuggestItem, ILocationCitySuggests } from '~/types/location'
import { useLocationStore } from '~/store/location'

const locationStore = useLocationStore()
const customCSS = useCustomCSS()

// Состояние поиска и списков городов
const searchText = ref('')
const cities: Ref<ILocationCitySuggestItem[]> = ref([])
const initialCities: Ref<ILocationCitySuggestItem[]> = ref([]) // Исходный список городов
const isLoading = ref(false)

// Функция для получения списка городов
const fetchCities = async (query: string | null = null) => {
  isLoading.value = true
  const nuxtApp = useNuxtApp()
  const params = query ? { query: upperCase(query) } : {}

  const response = await nuxtApp.$api<ILocationCitySuggests>(apiPath.location.suggest.city, { params })
  cities.value = response.items
  isLoading.value = false
}

// Дебаунс-функция для оптимизации запросов
const debouncedFetchCities = debounce(() => fetchCities(searchText.value), 300)

// Обновление списка городов при изменении `searchText`
watch(searchText, (newVal) => {
  if (newVal) {
    debouncedFetchCities()
  }
  else {
    cities.value = initialCities.value
  }
})

// Инициализация компонента и начальная загрузка городов
onMounted(async () => {
  await fetchCities()
  initialCities.value = cities.value
})

// Выбор города
const selectLocation = async (id: number) => {
  await locationStore.updateCurrent(id)
}


How can I check that fetchCities has been called on mounted hook and initialCities was been set ? I use @nuxt/test-utils
Was this page helpful?