المحاكاة واختبار مكونات الخادم
اختبر مكونات الخادم غير المتزامنة وإجراءات الخادم ومعالجات المسارات عبر محاكاة طبقات البيانات واستدعاءات الشبكة، لتبقى اختبارات Next.js الكاملة سريعة وموثوقة.
المحاكاة واختبار مكونات الخادم درس مجاني في Next.js 15 Fullstack Web Apps على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack Web Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
The Server Component Challenge
Server Components are async and run on the server, so classic client-render test tools do not fit perfectly. The key is to test their data dependencies in isolation and test the rendered output separately.
Separate Logic from Rendering
Extract data-fetching and business logic into plain functions. Pure functions are trivial to unit test without rendering anything.
export function formatPrice(cents) {
return '$' + (cents / 100).toFixed(2);
}Testing a Pure Helper
A pure helper is testable anywhere with no mocks at all.
function formatPrice(cents) {
return '$' + (cents / 100).toFixed(2);
}
console.log(formatPrice(1999) === '$19.99');
console.log(formatPrice(500) === '$5.00');Mocking the Data Layer
Server Components usually call a repository or ORM. Mock that module so tests do not hit a real database.
import { vi } from 'vitest';
import * as db from '@/lib/db';
vi.spyOn(db, 'getUser').mockResolvedValue({ id: 1, name: 'Ada' });Rendering an Async Server Component
Because the component is async, you can await it to get its element tree, then assert on it with your render utility.
import { render, screen } from '@testing-library/react';
import Profile from '@/app/profile/page';
it('shows the name', async () => {
render(await Profile());
expect(screen.getByText('Ada')).toBeInTheDocument();
});Mocking fetch with MSW
When a component fetches from an external API, intercept the request with Mock Service Worker (MSW) instead of stubbing fetch by hand.
import { http, HttpResponse } from 'msw';
export const handlers = [
http.get('https://api.example.com/user', () =>
HttpResponse.json({ name: 'Ada' })
),
];Testing Server Actions
Server Actions are async functions. Call them directly with mocked dependencies and assert on side effects and return values.
import { createTodo } from '@/app/actions';
import * as db from '@/lib/db';
it('creates a todo', async () => {
const spy = vi.spyOn(db, 'insertTodo').mockResolvedValue({ id: 1 });
await createTodo('Write tests');
expect(spy).toHaveBeenCalledWith('Write tests');
});Mocking revalidatePath
Actions often call revalidatePath. Mock next/cache so the call does not throw outside a request scope, and assert it was invoked.
vi.mock('next/cache', () => ({
revalidatePath: vi.fn(),
}));Testing Route Handlers
Route handlers take a Request and return a Response. Build a request, call the handler, and inspect the response.
import { POST } from '@/app/api/todos/route';
it('returns 400 on empty body', async () => {
const req = new Request('http://t/api/todos', { method: 'POST', body: '{}' });
const res = await POST(req);
expect(res.status).toBe(400);
});Keep Tests Deterministic
Avoid flaky tests:
- Reset mocks between tests (
vi.clearAllMocks()). - Freeze time when testing dates.
- Never call real networks or databases.
The Testing Pyramid
Balance your suite: many fast unit tests for logic, fewer integration tests for components plus data, and a small set of E2E tests (Playwright) for critical flows.
Quick Check
What is the recommended way to test an async Server Component that calls your ORM?
Recap
You learned to test fullstack Next.js code:
- Separate pure logic for easy unit tests.
- Mock the data layer and use MSW for network calls.
- Await async Server Components; call Server Actions and route handlers directly.
- Keep tests deterministic and follow the testing pyramid.
تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 12
- الدروس
- 48
الأسئلة الشائعة
هل درس «المحاكاة واختبار مكونات الخادم» مجاني؟
نعم — نص درس «المحاكاة واختبار مكونات الخادم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack Web Apps، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.
ماذا ستتعلم في «المحاكاة واختبار مكونات الخادم»؟
اختبر مكونات الخادم غير المتزامنة وإجراءات الخادم ومعالجات المسارات عبر محاكاة طبقات البيانات واستدعاءات الشبكة، لتبقى اختبارات Next.js الكاملة سريعة وموثوقة. تتمرن على Next.js 15 Fullstack Web Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack Web Apps؟
لا تُشترط خبرة سابقة. Next.js 15 Fullstack Web Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «المحاكاة واختبار مكونات الخادم»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack Web Apps هذا؟
نعم. كل درس في Next.js 15 Fullstack Web Apps يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- اختبارات الوحدة والتكامل
- الاختبار الشامل باستخدام Playwright
- المستودعات الأحادية والواجهات الأمامية المصغرة
- المحاكاة واختبار مكونات الخادم