Node.js and browser tests together

This guide runs Node.js tests and browser tests in one vitest command. Each preset gets its own Vitest project, and the root config owns coverage. This package’s own repository uses this layout.

Steps

Install the package, Vitest 5, the Playwright provider, and a coverage provider:

pnpm add -D @repobuddy/vitest vitest @vitest/browser-playwright @vitest/coverage-v8
npx playwright install chromium

Create vitest.config.node.ts:

import { defineProject } from 'vitest/config'
import { nodeTestPreset } from '@repobuddy/vitest/config/node'

export default defineProject({
  plugins: [nodeTestPreset({ includeGeneralTests: true })],
  test: { name: 'node' },
})

Create vitest.config.browser.ts:

import { defineProject } from 'vitest/config'
import { browserTestPreset } from '@repobuddy/vitest/config/browser'

export default defineProject({
  plugins: [browserTestPreset()],
  test: { name: 'browser' },
})

Turn on includeGeneralTests in one project only, or general tests run twice.

Create the root vitest.config.ts. Vitest reads coverage from the root config only, so set it here:

import { defineConfig } from 'vitest/config'
import { buddyConfigDefaults } from '@repobuddy/vitest/config/node'

export default defineConfig({
  test: {
    coverage: {
      include: buddyConfigDefaults.include.source,
      exclude: buddyConfigDefaults.exclude.test,
    },
    projects: ['vitest.config.*.ts'],
  },
})

Do not name a load test config vitest.config.load.ts in this layout. The vitest.config.*.ts pattern would add it as a project. See Load tests.

Finished layout

vitest.config.ts          # projects + coverage
vitest.config.node.ts     # nodeTestPreset({ includeGeneralTests: true })
vitest.config.browser.ts  # browserTestPreset()

Verify

Run pnpm vitest run. The output lists tests under node and browser. The browser instance shows as browser (chromium):
```
✓ |node| src/sum.spec.node.ts > runs in GMT
✓ |browser (chromium)| src/time-zone.spec.tsx > reports GMT
```
Run pnpm vitest run --coverage. One report covers files under src, source, and code, without test files.
Run one project with pnpm vitest run --project node.

Node.js and browser tests together

Steps

Finished layout

Verify

Related