Cheat Sheet: React مع Vitest · مذكرات سعيد

المكتبات

vitestrunner + expect + hooks + vi.fn وvi.mock وvi.spyOn

jsdomDOM وهمي في Node؛ اختاره بـ environment: "jsdom"

@testing-library/reactrender وscreen وwithin وwaitFor وcleanup

@testing-library/domالأساس والـ peer dependency؛ غالبًا مش هتستورده مباشرة

user-eventتفاعل قريب من اليوزر؛ اعمل setup() وawait للكتابة والضغط

jest-domDOM matchers؛ استورد /vitest مرة في setup

MSWاعتراض network بـ handlers؛ setupServer في Node tests

اختار الـ query

موجود دلوقتيgetByRole أو getByLabelText

هيظهر بعد asyncfindByRole أو findByText

لازم مش يكون موجودqueryByRole ثم not.toBeInTheDocument()

عناصر كتيرgetAllBy أو findAllBy

جوه container أو rowwithin(container)

شرط async مركبwaitFor(() => expect(...))

تست الفورم

Arrangeuser + callback mock + render

Acttype بالـ label ثم click بالـ role والـ name

Successاستنى status، افحص callback، والقيمة اتفضت

Request contractMSW handler تسجل request.json()

Validationرسالة ظاهرة والـ POST متنادتش

Server erroroverride بـ server.use ورد 500

LoadingPromise gate بدل sleep عشوائي

تست القائمة

LoadinggetByRole("status") فور render

DatafindByRole("list") ثم within(list)

Rowحددها بالنص، وبعدها اختبر الأزرار جواها

EmptyGET ترجع []، ورسالة empty تظهر والقائمة تختفي

ErrorGET ترجع 503، واستنى role="alert"

Deleteclick زر row، افحص params، واستنى اختفاء row

أخطاء متكررة

نسيان awaitأوامر user-event async

getBy بعد requestاستخدم findBy للحاجة اللي هتظهر لاحقًا

test ids لكل حاجةابدأ role وlabel عشان تختبر UI قابلة للاستخدام

mock fetchفضّل MSW لاختبار network behavior

handler بتتسربserver.resetHandlers() بعد كل test

DOM بتتسربcleanup() لو Vitest globals مقفولة

sleepاستنى عنصر/شرط، أو استخدم Promise gate

خلصت الموضوع لما

تجهز المكتبات السبعة وتعرف دورهم
تكتب form test للنجاح والvalidation والerror
تكتب list test لكل الحالات
تختار queries حسب التوقيت والعدد
تنضف DOM والhandlers والmocks بين التستات

🧠 اختبر نفسك

١) بعد click، رسالة النجاح هتظهر لما POST تخلص. تستخدم إيه؟

await screen.findByRole(\"status\").

٢) عايز زر الحذف بتاع row معينة؟

حدد الـ row وبعدها within(row).getByRole(\"button\", { name: ... }).

٣) عايز backend ترجع error في test واحدة؟

server.use بـ handler override؛ setup تعمل reset بعدها.

٤) ليه tests دي أقوى من فحص إن fetch اتنادت؟

لأنها تختبر رحلة المستخدم والـ request والنتيجة الظاهرة، مش implementation detail واحدة.