Setting Up Jest or Vitest

Environment: node, jsdom or happy-dom

Both runners default to a node environment, which has no document or window. Component tests need a simulated DOM: jsdom (the long-standing, more complete implementation) or happy-dom (a lighter, often faster alternative; Vitest supports it directly). In Jest you set testEnvironment: 'jsdom' and, in recent Jest versions, install jest-environment-jsdom separately. In Vitest you set test.environment and install the matching package. A setup file runs before each test file; it is the place to add @testing-library/jest-dom matchers, start an MSW server or reset mocks. You can also set the environment per file with a docblock comment such as @vitest-environment jsdom or @jest-environment jsdom. Exact package names and defaults change between major versions, so check the docs for yours.

Minimal configs for each runner

Install commands are shown, not run.

// --- Vitest: vitest.config.ts (or a `test` block in vite.config.ts) ---
// npm i -D vitest jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',           // or 'happy-dom'
    globals: true,                  // optional: describe/it/expect without imports
    setupFiles: ['./src/test/setup.ts'],
  },
});

// src/test/setup.ts
import '@testing-library/jest-dom/vitest';   // adds toBeInTheDocument() etc.

// --- Jest: jest.config.ts ---
// npm i -D jest jest-environment-jsdom ts-jest @types/jest @testing-library/jest-dom ...
import type { Config } from 'jest';

const config: Config = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/test/setup.ts'],
  moduleNameMapper: { '^@/(.*)$': '<rootDir>/src/$1' },   // mirror your path aliases
};
export default config;

Add npm scripts early

Add "test": "vitest" (watch mode locally) and "test:ci": "vitest run", or "test": "jest" and "test:watch": "jest --watch", so every developer and the CI job run tests the same way.

Quick check: Why do component tests need jsdom or happy-dom?

• They replace the assertion library
• They make tests run in Chrome
• They compile TypeScript
• The default node environment has no document or window for components to render into