Steps to setup tests in vite (react) project

App.test.jsx

import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import App from "../App";
import userEvent from "@testing-library/user-event";

describe("testing App component", async () => {
  it("header is shown", () => {
    render(<App />);
    expect(screen.getByText(/empty template/i)).toBeInTheDocument();
  });

  it("button click works", async () => {
    const user = userEvent.setup();
    render(<App />);
    const btn = screen.getByRole("button", { name: "save" });
    await userEvent.click(btn);
    const text = screen.getByText("clicked");
    expect(text).toBeInTheDocument();
  });
});

vite-test-setup.md

1. Install libraries

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

2. This stuff into the vite config file

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/test/setup.js",
  },
})

3. Create src/test/setup.js

import "@testing-library/jest-dom"

4. Add 'test'-script to package.json

"test": "vitest"

5. Write tests into './src/test' -directory

Filenames are like ComponentName.test.jsx