Browser tests running in forks pool when using nested projects in monorepo.

[irfan-ga]

Browser tests running in forks pool when using nested projects in monorepo

Environment

• Vitest Version: 4.0.16
• Node Version: >=22
• Monorepo Setup: npm workspaces
• Browser Provider: @vitest/browser-playwright

Current Structure

I have a monorepo with the following structure:

monorepo/
├── vitest.config.ts          # Root config
├── apps/
│   └── web/
│       ├── vitest.config.ts  # Sub-project config with nested projects
│       └── vitest-example/
│           ├── HelloWorld.test.tsx  # Browser test
│           └── sum.test.ts          # Node test
└── packages/

Root Configuration (vitest.config.ts)

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    projects: ["apps/*"], // Glob pattern to find sub-projects
  },
});

Sub-Project Configuration (apps/web/vitest.config.ts)

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

export default defineConfig({
  test: {
    projects: [
      {
        // Browser tests - for React components and browser-specific code
        plugins: [react()],
        extends: true,
        test: {
          name: "browser",
          include: [
            "**/*.browser.test.{ts,tsx}",
            "**/*.test.tsx", // React component tests default to browser
          ],
          browser: {
            enabled: true,
            provider: playwright(),
            instances: [
              { browser: "chromium" },
              { browser: "firefox" },
              { browser: "webkit" },
            ],
          },
        },
      },
      {
        // Node tests - for simple functions and utilities
        extends: true,
        test: {
          name: "node",
          include: ["**/*.test.ts"],
          exclude: ["**/*.browser.test.ts"],
          environment: "node",
        },
      },
    ],
  },
});

Test Files

Browser Test (apps/web/vitest-example/HelloWorld.test.tsx):

import { expect, test } from "vitest";
import { render } from "vitest-browser-react";
import HelloWorld from "./HelloWorld";

test("renders name", async () => {
  const { getByText } = await render(<HelloWorld name="Vitest" />);
  await expect.element(getByText("Hello Vitest!")).toBeInTheDocument();
});

Node Test (apps/web/vitest-example/sum.test.ts):

import { expect, test } from "vitest";
import { sum } from "./sum";

test("should return the sum of two numbers", () => {
  expect(sum(1, 2)).toBe(3);
});

Problem

When running tests from the root of the monorepo using npm run test:browser (or vitest), I get the following error:

Error: vitest/browser can be imported only inside the Browser Mode.
Your test is running in forks pool.
Make sure your regular tests are excluded from the "test.include" glob pattern.

What works:

• ✅ Running vitest from apps/web/ directory works correctly
• ✅ Browser tests run in browser mode
• ✅ Node tests run in Node.js environment

What doesn't work:

• ❌ Running vitest from root directory
• ❌ Browser tests are routed to "forks pool" (Node.js execution pool) instead of browser mode
• ❌ Error occurs because vitest-browser-react requires browser mode but test runs in Node.js pool

Expected Behavior

When running from root:

1. Root config should find apps/web/vitest.config.ts via glob pattern apps/*
2. Nested projects (browser + node) should be properly recognized
3. HelloWorld.test.tsx should be routed to the "browser" project (browser mode)
4. sum.test.ts should be routed to the "node" project (Node.js environment)
5. Both should work correctly from root

Questions

1. Is this a supported pattern? Can a sub-project config file (found via glob pattern) define nested projects using defineConfig with a projects array?

2. Should I use defineProject instead? According to the documentation, defineProject is recommended for project configs. However, I need multiple projects (browser + node) within the same sub-project. How should this be structured?

3. Is there a better way to structure this? Should I:

   • Define all projects inline in the root config?
   • Use explicit paths instead of glob patterns?
   • Restructure the configuration differently?

4. Why does it work from sub-directory but not from root? Is this a known limitation or configuration issue?

Additional Context

• I want to keep browser and Node tests separate within the same app
• I want both to work when running from root (monorepo-level testing)
• I want to maintain encapsulation (app-specific config stays in app directory)
• Following Vitest 4.0 best practices for monorepos

Reproduction Steps

1. Create monorepo with root vitest.config.ts using projects: ["apps/*"]
2. Create apps/web/vitest.config.ts with nested projects (browser + node)
3. Create browser test file importing vitest-browser-react
4. Run vitest from root directory
5. Observe error: test runs in forks pool instead of browser mode

Thank you for your help!

[irfan-ga]

@hi-ogawa, @sheremet-va
can you please help here when you have some time.

[irfan-ga]