الاختبارات في React

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

الإعداد الأساسي

تتضمن Create React App كلاً من Jest وReact Testing Library بشكل افتراضي. أما بالنسبة للمشاريع القائمة:

npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event

اختبارات الوحدة

اختبار مكوّن بسيط

// Button.js
function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

// Button.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

test('rendre le bouton avec le bon texte', () => {
  render(<Button>Cliquez-moi</Button>);
  expect(screen.getByText('Cliquez-moi')).toBeInTheDocument();
});

test('appeler onClick quand le bouton est cliqué', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Cliquez-moi</Button>);
  
  fireEvent.click(screen.getByText('Cliquez-moi'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});