Testing in devtools fails

[yuuzora]

Environment

• Operating System: Darwin
• Node Version: v20.16.0
• Nuxt Version: 3.13.2
• CLI Version: 3.15.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/test-utils/[email protected]
• Build Modules: -

Reproduction

Create a new Nuxt projet, install test suite following this link Create a simple test and run pnpm dev.

Open devtools and run the tests

Describe the bug

Tests run from the devtools or the Vitest UI url on pnpm dev are broken with TypeError: Cannot read properties of undefined (reading 'vueApp')

However, running vitest --ui manually is working

Additional context

This happens even with the most basic vitest config file and nuxt config

import { fileURLToPath } from 'node:url'
import { defineVitestConfig } from '@nuxt/test-utils/config'

export default defineVitestConfig({
    test: {
        environment: 'nuxt',
    },
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    '@nuxt/test-utils/module'
  ]
})

Spec file:

import { it } from 'vitest'
import { mountSuspended } from '@nuxt/test-utils/runtime'
import App from '../app.vue'

it('can mount some component', async () => {
    await mountSuspended(App)
})

Since test are working by running vitest --ui it isn't blocking but it kinda defeat the whole purpose of using @nuxt/test-utils/module, which seemed very convenient

Logs

No response

[jmescode-te]

I am having the same issue, but my error is window is not defined

[drewtownchi]

I had a similar issue and it was because of the file name. It should be Input.nuxt.spec.ts for example. I was forgetting the nuxt in one of my file names.

[mrcsmcln]

I am receiving the same issue, and it doesn't matter if I use .nuxt in the filename, environment: 'nuxt' in vite.config.js, or the // @vitest-environment nuxt comment within the file. vitest --ui works just fine.