New project with @nuxt/test-utils fails

[sand remnant]

I've tried a few times now to set up a new nuxt project with the test module.
During the wizard, the test module prompts if it should add some example tests.
Some of these tests fail
component tests fail due to not being able to access the #imports
And the example e2e test fail due to setup (from @nuxt/test-utils/e2e) hooks bein timed out.

✗ example e2e test > (unnamed) [6266.00ms]
  ^ a beforeEach/afterEach hook timed out for this test.

test\nuxt\component.nuxt.test.ts:
[error] ✗ Build failed in 3.19s

# Unhandled error between tests
-------------------------------
error: Cannot find package '#imports' from 'node_modules\@nuxt\test-utils\dist\runtime-utils\index.mjs'

[ember blade]

Hi @sand remnant. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The knowledge sources show this is a known area of friction in Nuxt 4’s testing setup, but they don’t contain a step‑by‑step fix for your exact failure. I’ll summarise what is clear from them and where the gaps are.

1. #imports / aliases not working in tests

   Nuxt 4 recently added automatic TypeScript path alias support for test files in test/ and tests/ so that ~/, @/ and #imports work without extra config. [TS aliases in tests]

   However, for tests that rely on the Nuxt runtime (auto‑imports like #imports, #components, etc.), you must run them in a Nuxt test environment configured via defineVitestProject. Otherwise, the imports may resolve at TypeScript level but fail at runtime. [Alias issue discussion; Vitest project example]

   The recommended Vitest config pattern is:

   // vitest.config.ts
   import { defineConfig } from 'vitest/config'
   import { defineVitestProject } from '@nuxt/test-utils/config'
   
   export default defineConfig({
     test: {
       projects: [
         await defineVitestProject({
           test: {
             name: 'unit',
             include: ['test/{e2e,unit}/*.{test,spec}.ts'],
             environment: 'node',
           },
         }),
         await defineVitestProject({
           test: {
             name: 'nuxt',
             include: ['test/nuxt/*.{test,spec}.ts'],
             environment: 'nuxt',
           },
         }),
       ],
     },
   })
   

   [Vitest project example]

   Notes from the Nuxt team:

• “The unit test example is not meant to rely on the nuxt runtime vars/auto imports. If you rely on the nuxt instance they should be in the nuxt folder (in the example in the docs).” [Docs fix discussion]

  • So:
    • Pure unit tests (no #imports) → environment: 'node'
    • Nuxt tests (need #imports, #components, etc.) → environment: 'nuxt' and placed under the Nuxt project (e.g. test/nuxt).

  Your component.nuxt.test.ts error:

  Cannot find package '#imports' from '...@nuxt\test-utils\dist\runtime-utils\index.mjs'
  

  suggests that file is being run without the Nuxt environment correctly applied (or not matched by the nuxt project’s include pattern). The sources don’t show the exact wizard‑generated paths, so I can’t say precisely which pattern to use, only that the fix is to ensure:

  • The file path matches the include of the environment: 'nuxt' project.
  • You are using await defineVitestProject as above so Nuxt config and aliases are wired into Vitest. [Alias issue discussion]

2. E2E setup hook timing out

   The timeout issue (beforeEach/afterEach hook timed out) is related to @nuxt/test-utils/e2e’s setup not finishing in time. The docs PR only notes that setupTimeout’s default was changed and teardownTimeout was added, but doesn’t give concrete values or troubleshooting steps. [Timeout docs update]

   From the sources, I can only say:

• There is a configurable setupTimeout and teardownTimeout in @nuxt/test-utils now. [Timeout docs update]

  • The example e2e test from the wizard likely uses setup from @nuxt/test-utils/e2e, which spins up a Nuxt instance; if that build/start process is slow or misconfigured, the hook can time out.

  Unfortunately, the knowledge sources don’t include the exact e2e example or how to override setupTimeout in that context, so I can’t give a precise code fix here.

---

Given the limitations of the sources, the most concrete actions I can suggest (and that are supported by them) are:

1. Check / adjust your vitest.config.ts to use await defineVitestProject and have a dedicated nuxt project with environment: 'nuxt' whose include matches test/nuxt/component.nuxt.test.ts. [Vitest project example]

2. Keep Nuxt‑runtime‑dependent tests under the Nuxt project folder (e.g. test/nuxt) and avoid #imports in plain unit tests that run in environment: 'node'. [Docs fix discussion]

3. If you’re on an older Nuxt 4 version, consider updating, since alias support for test files was explicitly improved to work out of the box. [TS aliases in tests]

For anything beyond that (especially the exact e2e timeout fix), the knowledge sources don’t provide enough detail; you may need to share your vitest.config.ts and Nuxt version in an issue or discussion so the Nuxt team can match it against the current test‑utils behaviour.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

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

[sand remnant]

New project with @nuxt/test-utils fails

I havent changed anything since i generated the project, so everything is defaults.
My vitest config

import { fileURLToPath } from "node:url";
import { defineConfig } from "vitest/config";
import { defineVitestProject } from "@nuxt/test-utils/config";

export default defineConfig({
  test: {
    projects: [
      {
        test: {
          name: "unit",
          include: ["test/unit/*.{test,spec}.ts"],
          environment: "node",
        },
      },
      await defineVitestProject({
        test: {
          name: "nuxt",
          include: ["test/nuxt/*.{test,spec}.ts"],
          environment: "nuxt",
          environmentOptions: {
            nuxt: {
              rootDir: fileURLToPath(new URL(".", import.meta.url)),
              domEnvironment: "happy-dom",
            },
          },
        },
      }),
      {
        test: {
          name: "e2e",
          include: ["test/e2e/*.{test,spec}.ts"],
          environment: "node",
        },
      },
    ],
    coverage: {
      enabled: true,
      provider: "v8",
    },
  },
});

I tried setting timeout higher

setupTimeout: 2400000,
teardownTimeout: 600000,

But the exact same problems still occur.

@ember blade

[ember blade]

Let me check the knowledge base for you again. One moment! :books: