react-typescrtipt-vite-testing-config.md

Instalación y configuracion de vitest + React Testing Library + JSDOM

En proyectos de React + Typescript + Vite

1. Instalaciones:

npm install --save-dev vitest
npm install --save-dev @testing-library/react @testing-library/dom @types/react @testing-library/jest-dom @testing-library/user-event  @types/react-dom
npm install --save-dev jsdom

2. Actualizar los scripts del package.json

"scripts: {
  ...
  "test": "vitest -u"

3. Crear la configuración de vitest para prevenir efectos secundarios entre pruebas setup.ts esta puede ir en una carpeta raiz llamada /tests

import { afterAll } from "vitest";
import { cleanup } from "@testing-library/react";
import '@testing-library/jest-dom';

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

4. vitest config y setup: vite.config.ts

/// <reference types="vitest/config" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./tests/setup.ts",
  },
})