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

rikisamurai commented 1 month ago

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

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

AriPerkkio commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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:

https://github.com/vitest-dev/vitest/blob/2a50464d58e98f58fed513971a570a952081bfef/packages/vitest/src/create/browser/creator.ts#L257-L280

rallets commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

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 commented 1 month ago

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

sheremet-va commented 1 month ago

It now throws a useful error in 2.1.2. The "create" script also now comments on the old config. You can uncomment it to continue running Node.js tests, but they won't intervene with browser ones anymore.

vitest-dev / vitest