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

[MakarVakulenko]

Environment

{
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "test:unit": "vitest",
    "test:dev": "NUXT_VITEST_DEV_TEST=true nuxt dev",
    "test": "pnpm test:unit --run && pnpm test:dev"
  },
  "devDependencies": {
    "node": ">=16.13 <=16.17",
    "nuxt": "3.6.5",
    "happy-dom": "^12.0.1",
    "nuxt-vitest": "^0.10.5",
    "vitest": "0.33.0",
    "@nuxt/test-utils": "^3.8.1",
    "vitest-environment-nuxt": "^0.7.0",
    "@nuxt/content": "^2.9.0",
    "@nuxt/devtools": "^1.0.3",
    "jsdom": "^22.1.0"
  },
  "dependencies": {
    "@nuxt/content": "^2.9.0",
    "@nuxt/devtools": "^1.0.3",
    "@nuxt/test-utils": "^3.8.1",
    "jsdom": "^22.1.0"
  },
  "version": "0.7.0"
}

Reproduction

stackblitz reproduction : https://stackblitz.com/edit/github-usaxfg-bsafdj?file=package.json,tests%2Fcontent.test.ts,pages%2Findex.vue,nuxt.config.ts,vitest.config.ts Run yarn , then yarn test

Describe the bug

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.

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 Index 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 context

// content.test.ts

import { describe, expect, test } from 'vitest'
import { setup, mount } from '@nuxt/test-utils'
import Index from '../pages/index.vue'

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

  const wrapper = mount(Index)

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

// index.vue
<template>
  <div>
    Hello world
  </div>
</template>

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

Please don`t mind the way template is written , in code it is as supposed to be.

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

Logs

//@nuxt/test-utils`s approach without setup :
 FAIL  test/content.test.ts [ test/content.test.ts ]
[error] SyntaxError: At least one <template> or <script> is required in a single file component.

//@nuxt/test-utils`s approach with setup method :
test/content.test.ts > my test
[error] GetPortError: Timeout waiting for port 36377 after 20 retries with 500ms interval.
[error]  ❯ Module.waitForPort node_modules/get-port-please/dist/index.mjs:341:9
[error]  ❯ Module.startServer node_modules/@nuxt/test-utils/dist/shared/test-utils.8f432eb9.mjs:112:5
[error]     111|     await ctx.serverProcess.kill();
    112|   }
    113| }
       | ^
    114| function fetch(path, options) {
    115|   return fetch$1(url(path), options);
[error]  ❯ setup2 node_modules/@nuxt/test-utils/dist/index.mjs:177:7

[farnabaz]

Did you manage to resolve the issue? As I can tell from the error, this is related to your custom Vue component which has no template or render function

[MakarVakulenko]

Did you manage to resolve the issue? As I can tell from the error, this is related to your custom Vue component which has no template or render function

Nope , issue is still here , just noticed that index code was not properly pasted in this topic, will change it right away. Here's my custom vue component , which I'm trying to use :

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

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

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.