SyntaxError: The requested module '@vitest/browser/context' does not provide an export named 'page'

[rikisamurai]

Describe the bug

When I try Browser Mode | Guide | Vitest in a react-ts template vite app, I got the error.

Reproduction

https://stackblitz.com/edit/vitest-dev-vitest-8xj8ao?file=vite.config.ts
run

npm run test:browser

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1 
    @vitest/browser: ^2.1.1 => 2.1.1 
    @vitest/ui: latest => 2.1.1 
    vite: latest => 5.4.6 
    vitest: latest => 2.1.1

Used Package Manager

npm

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]

You cannot use 'vitest-browser-react' outside Vitest Browser mode. In the vitest.workspace.ts there is project that's not using Browser Mode, and it's importing test file that's for browser mode:

export default defineWorkspace([
  'vite.config.ts',
  // ^^ This is not browser mode

  {
    extends: 'vite.config.ts',
    test: {
      browser: {
        enabled: true,
        name: 'chromium',
        provider: 'playwright',
        // https://playwright.dev
        providerOptions: {},
      },
    },
  },
]);

Does this work?

export default defineWorkspace([
-  'vite.config.ts',
+  {
+    extends: 'vite.config.ts',
+    // Non-Browser mode tests are here:
+    include: ['tests/**'],
+  },
  {
    extends: 'vite.config.ts',
    test: {
+     // Tests for browser mode are here
+     include: ['vitest-example/**'],
      browser: {
        enabled: true,
        name: 'chromium',
        provider: 'playwright',
        // https://playwright.dev
        providerOptions: {},
      },
    },
  },
]);

I didn't test this but that's my first guess.

[rikisamurai]

You cannot use 'vitest-browser-react' outside Vitest Browser mode. In the vitest.workspace.ts there is project that's not using Browser Mode, and it's importing test file that's for browser mode:

export default defineWorkspace([
  'vite.config.ts',
  // ^^ This is not browser mode

  {
    extends: 'vite.config.ts',
    test: {
      browser: {
        enabled: true,
        name: 'chromium',
        provider: 'playwright',
        // https://playwright.dev
        providerOptions: {},
      },
    },
  },
]);

Does this work?

export default defineWorkspace([
-  'vite.config.ts',
+  {
+    extends: 'vite.config.ts',
+    // Non-Browser mode tests are here:
+    include: ['tests/**'],
+  },
  {
    extends: 'vite.config.ts',
    test: {
+     // Tests for browser mode are here
+     include: ['vitest-example/**'],
      browser: {
        enabled: true,
        name: 'chromium',
        provider: 'playwright',
        // https://playwright.dev
        providerOptions: {},
      },
    },
  },
]);

I didn't test this but that's my first guess.

Thank you very much! Sorry for the confusion. I used the command npx vitest init browser directly for initialization. However, the official documentation indicates that the node and browser configurations should be separated.

If you need to run some tests using Node-based runner, you can define a workspace file with separate configurations for different testing strategies:

[AriPerkkio]

I used the command npx vitest init browser directly for initialization.

Looks like there is bug in this command. We need to fix the vitest.workspace.ts that this command creates:

vitest/packages/vitest/src/create/browser/creator.ts

Lines 257 to 280 in 2a50464

	const workspaceContent = [
	`import { defineWorkspace } from 'vitest/config'`,
	'',
	'export default defineWorkspace([',
	' // This will keep running your existing tests.',
	' // If you don\'t need to run those in Node.js anymore,',
	' // You can safely remove it from the workspace file',
	' // Or move the browser test configuration to the config file.',
	` '${relativeRoot}',`,
	` {`,
	` extends: '${relativeRoot}',`,
	` test: {`,
	` browser: {`,
	` enabled: true,`,
	` name: '${options.browser}',`,
	` provider: '${options.provider}',`,
	options.provider !== 'preview' && ` // ${getProviderDocsLink(options.provider)}`,
	options.provider !== 'preview' && ` providerOptions: {},`,
	` },`,
	` },`,
	` },`,
	`])`,
	'',
	].filter(c => typeof c === 'string').join('\n')

[rallets]

Hi, I also met the same problem. My workspace configuration now looks like this:

// /vitest.workspace.ts
export default defineWorkspace([
	// This will keep running your existing tests.
	// If you don't need to run those in Node.js anymore,
	// You can safely remove it from the workspace file
	// Or move the browser test configuration to the config file.

	{
		// Non-Browser mode tests are here:
		test: {
			include: ['src/**/*.test.ts'],
			name: 'unit',
			environment: 'node',
		},
	},
	{
		test: {
			// Tests for browser mode are here
			setupFiles: ['./vitest.setup.ts'],
			include: ['vitest-example/**/*.test.tsx', 'src/**/*.test.tsx'],
			name: 'browser',
			browser: {
				enabled: true,
				name: 'chromium',
				provider: 'playwright',
				// https://playwright.dev
				providerOptions: {
					launch: {
						devtools: true,
					}
				},
			},
		},
	},
])

and vitest.setup.ts

import '@testing-library/jest-dom/vitest'
import { cleanup } from '@testing-library/react'
import { afterEach } from 'vitest'

afterEach(() => {
	cleanup()
})

vitest.setup.ts is important otherwise tests running many times manually from the UI will fail. I think you can also have

afterEach(() => {
	cleanup()
})

in each test file, but I haven't tested it.

A repo with a full setup is available here:
https://github.com/rallets/vite-react-vitest

[AriPerkkio]

@rallets in your case there are browser tests included by this glob:

// Non-Browser mode tests are here:
test: {
  include: ['src/**/*.test.ts'],

https://github.com/rallets/vite-react-vitest/blob/7a5ba4f20a6f6b9bf47710d033089724593b4e24/src/pages/Form.test.tsx#L2

[rallets]

Hi @AriPerkkio why are you saying so? That include should state that those tests are "node" tests. Isn't?
My setup works correctly, or did I miss something?

[AriPerkkio]

Oh right, there is *.ts and *.tsx extensions. It is working correctly in your setup.