Kurulum

import react from "@vitejs/plugin-react";
import { defineConfig } from "vitest/config";

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

import "@testing-library/jest-dom/vitest";

{
  "compilerOptions": {
    "types": ["vite/client", "vitest/globals", "@testing-library/jest-dom"]
  }
}

{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run"
  }
}

.vitest/

export type Product = {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
};

export function formatPrice(price: number): string {
  return new Intl.NumberFormat("tr-TR", {
    style: "currency",
    currency: "TRY",
  }).format(price);
}

import { formatPrice } from "./format-price";
import type { Product } from "./types";

export function ProductCard({ product }: { product: Product }) {
  return (
    <article>
      <h2>{product.name}</h2>
      <p>{formatPrice(product.price)}</p>
    </article>
  );
}

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

test("ürün adını ve fiyatını gösterir", () => {
  render(
    <ProductCard
      product={{ id: 1, name: "Kablosuz Kulaklık", price: 1299, inStock: true }}
    />,
  );

  expect(
    screen.getByRole("heading", { name: "Kablosuz Kulaklık" }),
  ).toBeInTheDocument();
  expect(screen.getByText("₺1.299,00")).toBeInTheDocument();
});

npm run test:run