اختبار React باستخدام Vitest و RTL خطوة بخطوة

بناء تطبيق رائع شيء مهم، لكن التأكد أنه لا ينكسر عند أي تعديل أهم. هنا يأتي دور الاختبارات. في هذا الدرس سنستخدم Vitest مع React Testing Library لكتابة اختبارات واضحة وسهلة.

لماذا نكتب اختبارات؟

• تحميك من الأخطاء عند التعديل.
• تجعل الكود أكثر ثقة واستقرارًا.
• تسهل التعاون في المشاريع الكبيرة.

الخطوة 1: التثبيت

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

الخطوة 2: إعداد Vitest

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

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

// src/setupTests.js
import "@testing-library/jest-dom";

الخطوة 3: أول اختبار بسيط

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

describe("App", () => {
  it("يعرض العنوان", () => {
    render(<App />);
    expect(screen.getByText("مرحبًا")).toBeInTheDocument();
  });
});

اختبار التفاعل مع الزر

import userEvent from "@testing-library/user-event";

it("يزيد العداد عند الضغط", async () => {
  render(<Counter />);
  const btn = screen.getByRole("button", { name: /زيادة/ });

  await userEvent.click(btn);
  expect(screen.getByText("1")).toBeInTheDocument();
});

اختبار جلب بيانات (Mock)

global.fetch = vi.fn(() =>
  Promise.resolve({
    ok: true,
    json: () => Promise.resolve([{ id: 1, name: "أحمد" }]),
  })
);

أفضل الممارسات

• ابدأ بالمكوّنات المهمة فقط.
• اجعل الاختبارات قصيرة وواضحة.
• استخدم أسماء تصف السلوك المطلوب.

الأسئلة الشائعة — FAQ

ما الفرق بين Vitest و Jest؟

Vitest أسرع ومصمم لمشاريع Vite، بينما Jest أقدم وأكثر انتشارًا.

ما هي React Testing Library؟

مكتبة تساعدك على اختبار المكوّنات من منظور المستخدم.

هل أحتاج الاختبارات في كل مشروع؟

يفضل وجود اختبارات للمكوّنات الأساسية مع نمو المشروع.

كيف أختبر حدث onClick؟

باستخدام userEvent لمحاكاة الضغط ثم التحقق من النتيجة.

هل يمكن اختبار API calls؟

نعم، عبر mock للطلبات أو باستخدام MSW.