NuxtN
Nuxt13mo ago
Yuri

useNuxtApp && mountSuspended

My Component:
<template>
<div>{{test}}</div>
</template>

<script lang="ts" setup>
const test = ref('111')
const fetchCities = async () => {
  test.value = '222';
  const nuxtApp = useNuxtApp()
  await nuxtApp.$api(apiPath.location.suggest.city)
  test.value = '333';
}

onMounted(async () => {
  await fetchCities()
})
</script>


My test:
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";

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

Why console.log render
<div>222</div>

Why not "333" ? How can I fix this error?
Was this page helpful?