Next.js + Vitest の環境構築手順

pnpm add -D -E vitest @vitest/browser-playwright @vitejs/plugin-react @testing-library/react @testing-library/dom @testing-library/jest-dom @testing-library/user-event vite-tsconfig-paths msw @vitest/coverage-v8 fishery @faker-js/faker

import { defineConfig, defineProject } from 'vitest/config'
import { playwright } from '@vitest/browser-playwright'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  test: {
    projects: [
      defineProject({
        test: {
          name: 'unit',
          include: ['**/__tests__/**/*.unit.{test,spec}.ts'],
          environment: 'node',
        },
      }),
      defineProject({
        plugins: [tsconfigPaths(), react()],
        test: {
          name: 'browser',
          include: ['**/__tests__/**/*.browser.{test,spec}.ts{,x}'],
          setupFiles: ['./vitest.setup.ts'],
          browser: {
            enabled: true,
            provider: playwright(),
            headless: true,
            instances: [{ browser: 'chromium' }],
          },
        },
      }),
    ],
  },
})

import '@testing-library/jest-dom/vitest'

{
  "scripts": {
    // ...
    "test": "vitest",
    "test:coverage": "vitest run --coverage",
    "test:run": "vitest run"
    // ...
  },
}

pnpm dlx playwright install --with-deps

pnpm dlx playwright uninstall --all