Is it possible to mix browser tests and Node unit tests in the same package?

[hubertgrzeskowiak]

I've got a package that I could like to test in both unit tests and in browser based tests.
When I set browser.enabled to true in the config, then all tests will be run in a browser though. Is there a way to conditionally enable browser mode for some tests, e.g. based on a test file naming scheme (**/*.browser.test.ts)?

I know I could write two separate configs and have two separate invocations from package.json, but then I wouldn't get a single test report. Any way around that?

[AriPerkkio]

This can be done with Vitest Workspaces. I have a project using it here: https://github.com/AriPerkkio/aria-live-capture/blob/master/vitest.workspace.ts. It runs test cases in JSDOM on Node and in browser mode.

[kwojcik]

Here's how I'm running some tests in jsdom and others in the browser.

import { configDefaults, defineWorkspace } from 'vitest/config';
import { CONFIG } from './vite.config';

// Setup multiple workspaces so that we can run tests that look like
// *.jsdom.test.* in jsdom and the rest in the browser. Some tests
// are not possible to run in the browser.
export default defineWorkspace([
  {
    ...CONFIG,
    test: {
      ...CONFIG.test,
      name: 'browser',
      exclude: [...configDefaults.exclude, 'src/**/*.jsdom.test.*'],
      setupFiles: ['./setup-tests-browser.ts'],
    },
  },
  {
    ...CONFIG,
    test: {
      ...CONFIG.test,
      name: 'jsdom',
      environment: 'jsdom',
      browser: undefined,
      include: ['src/**/*.jsdom.test.*'],
      setupFiles: ['./setup-tests-jsdom.ts'],
    },
  },
]);

[sheremet-va]

You can also use extends option instead of spreading the config:

export default defineWorkspace([
  {
	extends: './vite.config.ts',
    test: {
      name: 'browser',
      exclude: [...configDefaults.exclude, 'src/**/*.jsdom.test.*'],
      setupFiles: ['./setup-tests-browser.ts'],
    },
  },
  {
	extends: './vite.config.ts',
    test: {
      name: 'jsdom',
      environment: 'jsdom',
      browser: undefined,
      include: ['src/**/*.jsdom.test.*'],
      setupFiles: ['./setup-tests-jsdom.ts'],
    },
  },
]);

There is an example in documentation: https://main.vitest.dev/guide/browser/#configuration

[stevez]

First I set up the project, and it didn't work, ends up using different vitest config files, then it is working, check my example repo: https://github.com/stevez/restaurant-reviews-platform/blob/main/package.json, also I implement a tool to merge the browser tests and node tests: https://www.npmjs.com/package/vitest-coverage-merge