اختبار تطبيقات React: اختبارات الوحدة والتكامل والشامل

اختبار تطبيقات React

ابنِ ثقةً في شيفرتك عبر استراتيجيات اختبار شاملة.

اختبار الوحدة باستخدام Jest

// utils.test.js
import { formatCurrency, calculateTotal } from './utils';

describe('formatCurrency', () => {
    it('formats positive numbers', () => {
        expect(formatCurrency(1234.56)).toBe('$1,234.56');
    });

    it('handles zero', () => {
        expect(formatCurrency(0)).toBe('$0.00');
    });
});

اختبار المكوّنات باستخدام Testing Library

import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Counter from './Counter';

test('increments counter on click', async () => {
    render(<Counter />);

    expect(screen.getByText('Count: 0')).toBeInTheDocument();

    await userEvent.click(screen.getByRole('button', { name: /increment/i }));

    expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

اختبار العمليات غير المتزامنة

import { render, screen, waitFor } from '@testing-library/react';

test('loads and displays users', async () => {
    render(<UserList />);

    // Wait for loading to finish
    await waitFor(() => {
        expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
    });

    // Check users are displayed
    expect(screen.getByText('John Doe')).toBeInTheDocument();
});

الاختبار الشامل باستخدام Cypress

// cypress/e2e/login.cy.js
describe('Login Flow', () => {
    it('successfully logs in', () => {
        cy.visit('/login');
        cy.get('[data-testid="email"]').type('user@example.com');
        cy.get('[data-testid="password"]').type('password123');
        cy.get('button[type="submit"]').click();
        cy.url().should('include', '/dashboard');
        cy.contains('Welcome back').should('be.visible');
    });
});

اسعَ إلى هرم اختبار متوازن: اختبارات وحدة كثيرة، واختبارات تكامل أقل، وأقل قدر من الاختبارات الشاملة.