Vite + Vitest + RTL

• Criar Vite App com React e Typescript + SWC

• Instalar todas as bibliotecas abaixo como dependências de desenvolvimento.

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

• Adicionar script no package.json

"scripts": {
	...
	"test": "vitest --watch --ui"
}

• Criar src/tests/setup.ts

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

• Adicionar no vite.config.ts:

// ============= Adicionar no topo do arquivo ===========
/// <reference types="vitest" />
// ============= Adicionar no topo do arquivo ===========

export default defineConfig({
  ...
    test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: './src/tests/setup.ts',
        css: true
    }
})

• Adicionar ao tsconfig.json:

{
    "compilerOptions": {
    ...
        "types": ["vitest/globals"]
    },
    "include": [..., "src/tests/setup.ts"]
    ...
}

• Adicionar um arquivo de teste como src/App.tsx e /src/App.test.tsx:

import "./App.css";

function App() {
  return <>Hello world!</>;
}

export default App;

import { render, screen } from "@testing-library/react";
import App from "./App";

test("App contains correct heading", () => {
  render(<App />);
  const headingElement = screen.getByText("Hello world!");
  expect(headingElement).toBeInTheDocument();
});