Failed to run browser mode with Vitest

[trofe-doorloop]

Describe the bug

I try to use browser mode testing user vitest, with version 4.0.15.

I configured vitest.config.ts file with:

import { defineConfig } from "vitest/config";
import tsconfigPaths from "vite-tsconfig-paths";
import { playwright } from "@vitest/browser-playwright";

const config = defineConfig({
  test: {
    projects: [
      {
        plugins: [
          tsconfigPaths({ projects: ["./tsconfig.paths.json", "../../tsconfig.base.json"], ignoreConfigErrors: true })
        ],
        test: {
          name: "Components & Hooks Unit Tests",
          include: ["src/**/tests/*.test.tsx", "src/**/tests/use-*.test.ts"],
          restoreMocks: true,
          environment: "jsdom",
          browser: {
            provider: playwright(),
            enabled: true,
            instances: [{ browser: "chromium" }],
            headless: true
          }
        }
      }
    ]
  }
});

export default config;

I followed the manual installation guide, https://vitest.dev/guide/browser/#manual-installation, and I'm using Playwright.

When I run vitest --run -c ./vitest.config.ts I get an error:

file:/node_modules/.pnpm/@vitest+browser@4.0.15_msw@2.10.5_@types+node@24.3.0_typescript@5.9.2__vite@7.1.12_@types+nod_nsppi3d66lnza46vhfuubbygma/node_modules/@vitest/browser/dist/index.js:2947
                        const state = project.browser.state;
                                                      ^

TypeError: Cannot read properties of undefined (reading 'state')

Can anyone tell why?

I checked my listed dependencies, all of them are using the same version 4.0.15.

I only run this dummy test:
import { describe, it, expect } from "vitest";

describe("TEST", () => {
it("TEST", () => {
expect(true).toBe(true);
});
});

And still get the error.

Reproduction

Above, and simple test.

System Info

Described above

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[AriPerkkio]

I can reproduce the error with locally linked main Vitest too. Marking this as p3-bug for now, didn't look into root cause yet.

file:///x/vitest/packages/browser/dist/index.js:2943
                        const state = project.browser.state;
                                                      ^

TypeError: Cannot read properties of undefined (reading 'state')
    at file:///x/vitest/packages/browser/dist/index.js:2943:34
    at WebSocketServer.completeUpgrade (/x/vitest/node_modules/.pnpm/ws@8.18.3/node_modules/ws/lib/websocket-server.js:438:5)
    at WebSocketServer.handleUpgrade (/x/vitest/node_modules/.pnpm/ws@8.18.3/node_modules/ws/lib/websocket-server.js:346:10)
    at Server.<anonymous> (file:///x/vitest/packages/browser/dist/index.js:2940:7)
    at Server.emit (node:events:530:35)
    at onParserExecuteCommon (node:_http_server:950:14)
    at onParserExecute (node:_http_server:854:3)
    at HTTPParser.callbackTrampoline (node:internal/async_hooks:130:17)

Node.js v22.18.0

[AriPerkkio]

Looks like it's related to & in the name. Maybe some encoding issue on browser side?

This fixes is the issue:

import { defineConfig } from "vitest/config";
import { playwright } from "@vitest/browser-playwright";

const config = defineConfig({
  test: {
    projects: [
      {
        test: {
-         name: "Components & Hooks Unit Tests",
+         name: "Components and Hooks Unit Tests",
          include: ["**/add.test.ts"],
          browser: {
            provider: playwright(),
            enabled: true,
            instances: [{ browser: "chromium" }],
            headless: true,
          },
        },
      },
    ],
  },
});

export default config;

[trofe-doorloop]

Looks like it's related to & in the name. Maybe some encoding issue on browser side?

This fixes is the issue:

import { defineConfig } from "vitest/config";
import { playwright } from "@vitest/browser-playwright";

const config = defineConfig({
test: {
projects: [
{
test: {

•     name: "Components & Hooks Unit Tests",
  

•     name: "Components and Hooks Unit Tests",
      include: ["**/add.test.ts"],
      browser: {
        provider: playwright(),
        enabled: true,
        instances: [{ browser: "chromium" }],
        headless: true,
      },
    },
  },
  

  ],
  },
  });

export default config;

This resolved the issue.