Configrando RTL com vite + vitest

README.md

Configurando Vitest + RTL + Typescript

• Criar uma nova aplicação Vite se ainda não foi criada npm create vite@latest

Siga os passos para criar uma aplicação React com TS.

• Instalar as dependências necessárias

npm i -D vitest jsdom @testing-library/jest-dom @testing-library/react @testing-library/user-event 

• Criar um arquivo chamado setupTests.ts na raíz do projeto e adicionar:

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

• No arquivo vite.config.ts, adicionar em defineConfig os códigos não comentados abaixo:

  // vite.config.js
  
  // ...
  
  // export default defineConfig({
  //   plugins: [react()],
    test: {
      globals: true,
      environment: 'jsdom',
      setupFiles: './setupTests.ts',
      css: true,
      coverage: {
        reporter: ['text', 'json', 'html'],
      },
      reporters: ['verbose'],
    },
  // })

  E no início do arquivo, adicione uma linha com: /// <reference types="vitest" />

• No arquivo package.json, adicionar o script de teste e de coverage :

  // package.json
  
  //...
  
  "scripts": {
  //   "dev": "vite --open",
  //   "build": "vite build",
  //   "preview": "vite preview",
    "test": "vitest",
    "coverage": "vitest run --coverage",
  },
  
  // ...

Pronto, tudo configurado para usar vitest + RTL no seu projeto React com Vite e Typescript. 🎉