setup vitest + testing library

_README.md

1. Instalação:

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

2. Acrescentar os scripts teste e coverage ao package.json:

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
  + "test": "vitest",
  + "coverage": "vitest run --coverage",
  },

3. Acrescentar config ao vite.config (abaixo).

4. Criar o setupTests.js na raiz do projeto (abaixo).

5. Criar o arquivo de teste e executa-lo com o comando npm run test

6. Ao executar o comando npm run coverage pela primeira vez, será perguntado se deseja instalar o pacote '@vitest/coverage-c8', aperte Y para confirmar.

exemplo.test.jsx

import { render, screen } from '@testing-library/react';

import App from './App';

describe('App', () => {
  it('renders headline', () => {
    render(<App title="React" />);
    // check if App components renders text learn
    const texto = screen.getByText(/learn/i);
    expect(texto).not.toBeVisible();
  });
});

setupTests.js

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

vite.config.js

/// <reference types="vitest" />

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './setupTests.js',
    css: true,
    reporters: ['verbose'],
    coverage: {
      reporter: ['text', 'json', 'html'],
      include: ['src/**/*'],
      exclude: [],
    }
  },
})

// confirmar se o arquivo vite.d.ts tem as seguintes importações de tipos

/// <reference types="vite/client" />
/// <reference types="@testing-library/jest-dom" />

Se estiver usando typescript, será necessário incluir "types": ["vitest/globals"] dentro de compilerOptions no tsconfig para que seja possível usar o vitest de forma global (sem a necessidade de importação).