NuxtN
Nuxt14mo ago
5 replies
Yuri

useAsyncData & unit-testing

My component contains:
  await useAsyncData('layoutGetCurrent', () => locationStore.getCurrent())


My test:
import {shallowMount, flushPromises} from '@vue/test-utils'
import {describe, it, vi} from 'vitest'
import { createTestingPinia } from '@pinia/testing'
import LayoutHeaderLocation from '../LayoutHeaderLocation.vue'
import { useLocationStore } from '~/store/location'
import {mockNuxtImport} from "@nuxt/test-utils/runtime";

describe('LayoutHeaderLocation.vue', () => {
    mockNuxtImport('useAsyncData', () => {
        return () => Promise.resolve({ data: true });
    });

    const createWrapper = (options = {}) => {
        const testingPinia = createTestingPinia({ createSpy: vi.fn })
        return shallowMount(LayoutHeaderLocation, {
            global: { plugins: [testingPinia] },
            ...options,
        })
    }

    it('Проверка вызова getCurrent', async () => {
        const wrapper = createWrapper()
        await flushPromises()
        console.log(wrapper.html());
    })
})


But
console.log(wrapper.html())

does not display anything.

If I remove await in component, console.log display render code.

Why? How can I resolve this problem?
Was this page helpful?