Vitest + Jsdom + React Testing Library

Vitest + Jsdom + React Testing Library.md

Vitest + Jsdom + React Testing Library

TLDR; very quick setup to add vitest, jsdom and react testing library

install dependencies

pnpm i --save-dev vitest jsdom @testing-library/react @testing-library/jest-dom

update package.json

"scripts": {
  "test": "vitest"
}

create test/setup.ts

import { expect, afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/vitest';

afterEach(() => {
  cleanup();
});

update vite config

export default defineConfig({
  test: {
    environment: 'jsdom',
    setupFiles: ['./test/setup.ts'],
    testMatch: ['./src/**/*.test.tsx'],
    globals: true
  }
})