Vitest Error: @vitest/browser/context can be imported only inside the Browser Mode

Question

I am moving away from jest test configuration to vitest for the first time in my react project. I have followed their docs, but I am stuck with an error when I try to test a very simple component:

Error: @vitest/browser/context 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.

This is my test:

import { render } from "vitest-browser-react";
import Loader from "../../components/loader";
import { describe, expect, test } from "vitest";


describe("Loader test", () => {
  test("should render loader", async () => {
    const result = render(
      <Loader />
    )
    await expect.element(result.getByTestId("loader-testid")).toBeInTheDocument();
  });
});

And this is the vitest.config.mts:

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    browser: {
      enabled: false,
      name: 'chromium',
    },
    exclude: ['**/node_modules/**'],
    environment: "jsdom",
    setupFiles: 'setup-file.ts'
  },
})

And this is the setup-file.ts:

import 'vitest-browser-react'

I am using following version of packages:

"vite": "^5.4.11",
"vitest": "^2.1.8",
"vitest-browser-react": "^0.0.4",

And running my tests like this:

"test": "vitest --config vitest.config.mts",

Why do I get this error and how can I fix it?

Answer 1

maybe you need to set an instances prop

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    browser: {
      provider: 'playwright', // or 'webdriverio'
      enabled: true,
      // at least one instance is required
      instances: [
        { browser: 'chromium' },
      ],
    },
  }
})

https://vitest.dev/guide/browser/#configuration