export default defineNuxtConfig({
  devServer: {
    port: 3001
  }
})

export default defineNuxtConfig({
  devServer: {
    port: 3001
  }
})

export default defineNuxtRouteMiddleware((to, _from) => {
  const { isMobile } = useDevice()

  if (isMobile) {
    to.meta.layout = 'mobile'
  }
  else {
    to.meta.layout = 'default'
  }
})

export default defineNuxtRouteMiddleware((to, _from) => {
  const { isMobile } = useDevice()

  if (isMobile) {
    to.meta.layout = 'mobile'
  }
  else {
    to.meta.layout = 'default'
  }
})

Error: Cannot find import "$fetch" to mock
  Plugin: nuxt:vitest:mock-transform

Error: Cannot find import "$fetch" to mock
  Plugin: nuxt:vitest:mock-transform

TypeError: $fetch.mockResolvedValue is not a function

TypeError: $fetch.mockResolvedValue is not a function

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)

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)
}

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)

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)
}

import LocationSelection from '../LocationSelection.vue'
import {flushPromises} from "@vue/test-utils";

const mockApiResponse = {
  items: [
    { id: 1, name: 'City1' }
  ]
}

const mockApi = vi.fn().mockResolvedValue(mockApiResponse)
mockNuxtImport('useNuxtApp', () => () => ({
  $api: mockApi
}))

describe('LocationSelection.vue', () => {
  const createWrapper = async () => {
    return await mountSuspended(LocationSelection)
  }

  it('test',async ()=>{
    const wrapper = await createWrapper();
    await flushPromises();
    await wrapper.vm.$nextTick();
    console.log(wrapper.html());
  })
})

import LocationSelection from '../LocationSelection.vue'
import {flushPromises} from "@vue/test-utils";

const mockApiResponse = {
  items: [
    { id: 1, name: 'City1' }
  ]
}

const mockApi = vi.fn().mockResolvedValue(mockApiResponse)
mockNuxtImport('useNuxtApp', () => () => ({
  $api: mockApi
}))

describe('LocationSelection.vue', () => {
  const createWrapper = async () => {
    return await mountSuspended(LocationSelection)
  }

  it('test',async ()=>{
    const wrapper = await createWrapper();
    await flushPromises();
    await wrapper.vm.$nextTick();
    console.log(wrapper.html());
  })
})

import { describe, it, vi } from 'vitest'
import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
import LocationSelection from '../LocationSelection.vue'
import {flushPromises} from "@vue/test-utils";

// Mock the API response
const mockApiResponse = {
  items: [
    { id: 1, name: 'City1' },
    { id: 2, name: 'City2' }
  ]
}

const mockApi = vi.fn().mockResolvedValue(mockApiResponse)
mockNuxtImport('useNuxtApp', () => () => ({
  $api: mockApi
}))

describe('LocationSelection.vue', () => {
  const createWrapper = async () => {
    return await mountSuspended(LocationSelection)
  }

  it('test',async ()=>{
    const wrapper = await createWrapper();
    await flushPromises();
    await wrapper.vm.$nextTick();
    console.log(wrapper.html());
  })
})

import { describe, it, vi } from 'vitest'
import { mockNuxtImport, mountSuspended } from '@nuxt/test-utils/runtime'
import LocationSelection from '../LocationSelection.vue'
import {flushPromises} from "@vue/test-utils";

// Mock the API response
const mockApiResponse = {
  items: [
    { id: 1, name: 'City1' },
    { id: 2, name: 'City2' }
  ]
}

const mockApi = vi.fn().mockResolvedValue(mockApiResponse)
mockNuxtImport('useNuxtApp', () => () => ({
  $api: mockApi
}))

describe('LocationSelection.vue', () => {
  const createWrapper = async () => {
    return await mountSuspended(LocationSelection)
  }

  it('test',async ()=>{
    const wrapper = await createWrapper();
    await flushPromises();
    await wrapper.vm.$nextTick();
    console.log(wrapper.html());
  })
})