Nuxt Vitest browser and Playwright compatibility

[JulienChampagnol]

Environment

Nuxt project info:

Operating system	Linux 6.17.0-20-generic
CPU	11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz (8 cores)
Node.js version	v22.21.1
nuxt/cli version	3.34.0
Package manager	npm@10.9.4
Nuxt version	4.4.2
Nitro version	2.13.3
Builder	vite@8.0.8
Config	compatibilityDate, devtools, modules, vite
Modules	@pinia/nuxt@0.11.3

Reproduction

https://stackblitz.com/~/github.com/JulienChampagnol/NuxtVitestPlaywright

Describe the bug

Hi,

I have a Nuxt repo that is a library and not an actual app, and I would like to test some of its features in an e2e context that is mocking my real app (with nitro server routes)
For that I use vitest-browser playwright provider, but browser mode and nuxt environment seem to conflict.
The documentation for both nuxt and vitest isn't really explicit and I know that's a quite recent feature.

The test app in using nuxt layers ,as is my actual app, I have implemented some basic unit tests that run fine as well as an e2e test but I can't make it to work.

The test app in tests/e2e is running fine by itself, and the e2e is launching chromium, but I can't connect it to vitest playwright to test its behavior.

Thank you for your help

Additional context

No response

Logs

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Error: Failed to connect to the browser session "95027399-e076-42c0-82be-b13a424149ca" [e2e (chromium)] within the timeout.
 ❯ Timeout._onTimeout node_modules/vitest/dist/chunks/cli-api.lDy4N9kC.js:463:33
 ❯ listOnTimeout node:internal/timers:588:17
 ❯ processTimers node:internal/timers:523:7

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯


 Test Files   (1)
      Tests  no tests
     Errors  1 error
   Start at  14:46:38
   Duration  60.11s (transform 0ms, setup 0ms, import 0ms, tests 0ms, environment 0ms)

 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

[peterbud]

I have a similar issue: I had a working component test set with vitest browser mode and playwright(), and after the latest update (nuxt 4.4.2 -> 4.4.4, @nuxt/test-utils 4.0.0 -> 4.03) I see the same timeout issue.

Running DEBUG=vitest:browser* pnpm test:component reveals that the issue is related to reading the config where we have multi project vitest config with defineVitestProject:

failed to load config from /home/.../packages/app/vitest.config.mts

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Startup Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
DOMException [DataCloneError]: #<Object> could not be cloned.
    at new DOMException (node:internal/per_context/domexception:76:18)
    at structuredClone (node:internal/worker/js_transferable:126:26)
    at getVitestConfigFromNuxt (file:///home/.../node_modules/.pnpm/@nuxt+test-utils@4.0.3_@vue+test-utils@2.4.10_@vue+compiler-dom@3.5.34_@vue+server-rend_f076aec5f30568c884648a5621d2c81f/node_modules/@nuxt/test-utils/dist/config.mjs:133:39)