Nuxt•2w ago

useAsyncData & unit-testing

My component contains:

  await useAsyncData('layoutGetCurrent', () => locationStore.getCurrent())

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

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

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?

3 Replies

kapa.ai•2w ago

Hi @Yuri. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights into your issue with useAsyncData and unit testing in Nuxt. The problem you're experiencing is likely related to how useAsyncData works and how it's being mocked in your test. Let's break it down: 1. useAsyncData is a composable that's meant to be called directly in a setup function, plugin, or route middleware. It returns reactive composables and handles adding responses to the Nuxt payload Docs > Getting Started > Data Fetching (https://nuxt.com/docs/getting-started/data-fetching). 2. In your component, you're using await useAsyncData(...). This is causing the component to wait for the async operation to complete before rendering. 3. In your test, you're mocking useAsyncData using mockNuxtImport. However, the mock you've provided doesn't fully replicate the behavior of useAsyncData. It's returning a function that returns a Promise, but it's not providing the full structure that useAsyncData normally returns Docs > Getting Started > Testing (https://nuxt.com/docs/getting-started/testing#mocknuxtimport). To resolve this issue, you can try the following: 1. Update your mock to more closely resemble the actual useAsyncData return value:

mockNuxtImport('useAsyncData', () => {
  return () => Promise.resolve({
    data: ref(true),
    pending: ref(false),
    error: ref(null),
    refresh: vi.fn(),
    execute: vi.fn()
  });
});

mockNuxtImport('useAsyncData', () => {
  return () => Promise.resolve({
    data: ref(true),
    pending: ref(false),
    error: ref(null),
    refresh: vi.fn(),
    execute: vi.fn()
  });
});

2. Consider using mountSuspended instead of shallowMount. mountSuspended is a helper provided by @nuxt/test-utils that allows you to mount components with async setup Docs > Getting Started > Testing (https://nuxt.com/docs/getting-started/testing#mountsuspended):

import { mountSuspended } from '@nuxt/test-utils/runtime'

// ...
it('Проверка вызова getCurrent', async () => {
  const wrapper = await mountSuspended(LayoutHeaderLocation, {
    global: { plugins: [createTestingPinia({ createSpy: vi.fn })] }
  })
  console.log(wrapper.html());
})

import { mountSuspended } from '@nuxt/test-utils/runtime'

// ...
it('Проверка вызова getCurrent', async () => {
  const wrapper = await mountSuspended(LayoutHeaderLocation, {
    global: { plugins: [createTestingPinia({ createSpy: vi.fn })] }
  })
  console.log(wrapper.html());
})

3. If you're using Nuxt 3, make sure you're using the latest version of @nuxt/test-utils that's compatible with your Nuxt version. Remember that when testing components that use useAsyncData, you need to account for the asynchronous nature of the data fetching. The mountSuspended helper is designed to handle this scenario in Nuxt 3. If these suggestions don't resolve your issue, you might need to provide more details about your Nuxt version and the full component code to get a more accurate diagnosis. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@740173469404364872> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

YuriOP•2w ago

mountSuspended helps me

Gaming

Programming

useAsyncData & unit-testing