Trouble with Nuxt Content Module, Vitest, nuxt unit test and Test Setup

Question

I'm encountering issues while trying to set up unit tests for my Nuxt application using the Nuxt Content module and Vitest. Here's a breakdown of my situation:

I have a Nuxt application using the Nuxt Content module. I'm attempting to create a unit test in content.test.ts.

// content.test.ts
import { describe, expect, test } from 'vitest'
import { setup, mount } from '@nuxt/test-utils'
import HelloWorld from '../pages/helloWork.vue'
import App from '../app.vue'

describe('my test', async () => {
  await setup({
    // ... configuration options
  })

  const wrapper = mount(HelloWorld)

  test('works', async () => {
    expect(true).toBe(true)
  })
})

My HelloWorld component looks like this:

<!-- helloWork.vue -->
<template>
  <div>
    Hello world
  </div>
</template>

<script setup>
definePageMeta({
  layout: 'editor',
})
onMounted(async () => {
  const { data } = await useAsyncData(() => queryContent().find())
  console.log(' ~ file: helloWork.vue:12 ~ data:', data)
})
</script>

The main problem arises when I use await setup in my unit test, as it times out before reaching any functionality in the Vue component. Removing it leads to a SyntaxError when using the mount method.

I've also tried using nuxt-vitest/utils, specifically mountSuspended and renderSuspended methods, but the queryContent result in HelloWorld component always returns null.

Questions:

Which approach is more appropriate for testing Vue components in a Nuxt Content environment? How can I successfully use queryContent functionality while running content.test.ts?

Additional Information:

I'm using Vitest for testing, and here's my Vitest configuration:

// vitest.config.ts
import { defineVitestConfig } from 'nuxt-vitest/config'
import vitePluginSass from 'vite-plugin-sass'
import { createStyleImportPlugin } from 'vite-plugin-style-import'
import Vue from '@vitejs/plugin-vue'
import sass from 'sass'

export default defineVitestConfig({
  server: {
    host: 'localhost',
    port: 5000,
    strictPort: true,
    origin: 'http://localhost:8080',
  },
  plugins: [
    vitePluginSass(),
    createStyleImportPlugin({}),
    Vue(),
  ],
  test: {
    passWithNoTests: true,
    dangerouslyIgnoreUnhandledErrors: true,
    testTimeout: 20000,
    globals: true,
    environmentOptions: {
      nuxt: {
        rootDir: __dirname,
        domEnvironment: 'jsdom',
      },
    },
    deps: {
      inline: [/@nuxt\/test-utils/],
    },
    environment: 'jsdom',
    
  },
})

Any insights or guidance on resolving these issues would be greatly appreciated! Thanks in advance.

Ive tried setting up both nuxt-vitest/utils and @nuxt/test-utils. nuxt-vitest/utilss mountSuspended method succesfully mounted my component , but queryContent was always null. @nuxt/test-utils`s setup method leads to timeout crash , and removing it would show another error with mount issue which looks like this :

 FAIL  test/content.test.ts [ test/content.test.ts ]
[error] SyntaxError: At least one <template> or <script> is required in a single file component.