استخدام الـ Testing في React

الدرس السابع والعشرون: استخدام الـ Testing في React

اختبار الكود هو جزء مهم في دورة حياة تطوير البرمجيات، ويضمن أن التطبيق يعمل كما هو متوقع، وأن التغييرات التي تتم لا تؤدي إلى حدوث أخطاء غير مرغوب فيها. في React، يمكننا استخدام أدوات مثل Jest و React Testing Library لاختبار المكونات وضمان أنها تعمل بالشكل المطلوب.

1. أهمية اختبار الكود في React

اختبار الكود له أهمية كبيرة في تطبيقات React لعدة أسباب:

• تحسين الجودة: الاختبارات تساعد في اكتشاف الأخطاء والمشاكل بشكل مبكر.
• الوثوقية: عندما نقوم بإجراء تغييرات في الكود، يمكننا التأكد من أن هذه التغييرات لا تؤثر سلبًا على الوظائف الأخرى.
• الصيانة المستقبلية: مع وجود اختبارات، يصبح من السهل إضافة ميزات جديدة أو تعديل المكونات دون القلق من التأثير على الجزء الحالي من التطبيق.

2. كيفية استخدام Jest لاختبار المكونات

Jest هو إطار عمل لاختبار جافا سكريبت، يتم استخدامه بشكل رئيسي مع React لاختبار المكونات والوظائف.

إعداد Jest:

عند إنشاء تطبيق باستخدام create-react-app، يكون Jest مُعدًا مسبقًا بشكل افتراضي. يمكننا ببساطة البدء في كتابة الاختبارات باستخدام ملفات .test.js أو .spec.js.

كتابة اختبار مكون باستخدام Jest:

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

// Welcome.tsx
import React from 'react';

const Welcome = ({ name }: { name: string }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Welcome;

نريد الآن كتابة اختبار لهذا المكون باستخدام Jest.

// Welcome.test.tsx
import { render, screen } from '@testing-library/react';
import Welcome from './Welcome';

test('renders a welcome message', () => {
  render(<Welcome name="John" />);
  const messageElement = screen.getByText(/Hello, John!/i);
  expect(messageElement).toBeInTheDocument();
});

الشرح:

• render: دالة من React Testing Library تستخدم لتحميل المكون في بيئة الاختبار.
• screen.getByText: تستخدم للبحث عن عنصر يحتوي على نص معين.
• expect(…).toBeInTheDocument(): يتحقق من أن العنصر موجود في الوثيقة.

تشغيل الاختبارات:

لتشغيل الاختبارات، يمكنك استخدام الأمر التالي في الطرفية:

npm test

سيقوم Jest بتشغيل جميع الاختبارات التي تم تعريفها في الملفات التي تحتوي على .test.js أو .spec.js.

3. كيفية استخدام React Testing Library لاختبار واجهات React

React Testing Library هي مكتبة تُستخدم لاختبار واجهات React. وهي تركز على اختبار الواجهة كما يراها المستخدم النهائي، بدلاً من اختبار تفاصيل التنفيذ.

أهمية React Testing Library:

• الاختبارات القوية: تساعد على كتابة اختبارات تقيس الوظائف بدلاً من تفاصيل التنفيذ، مما يجعل الاختبارات أكثر مرونة وصمودًا ضد التغييرات.
• سهولة الفهم: تتيح لك كتابة اختبارات بطريقة مشابهة لكيفية استخدام المستخدم النهائي للتطبيق.

اختبار مكونات باستخدام React Testing Library:

لنكتب اختبارًا لمكون AddUserForm الذي نستخدمه في تطبيقنا. يتضمن المكون نموذجًا لإضافة مستخدم جديد.

// AddUserForm.tsx
import React, { useState } from 'react';

const AddUserForm = ({ onAddUser }: { onAddUser: (name: string, email: string) => void }) => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (name && email) {
      onAddUser(name, email);
      setName('');
      setEmail('');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        aria-label="name"
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        aria-label="email"
      />
      <button type="submit">Add User</button>
    </form>
  );
};

export default AddUserForm;

كتابة اختبار للمكون:

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

test('should add a new user when form is submitted', () => {
  const mockAddUser = jest.fn();

  render(<AddUserForm onAddUser={mockAddUser} />);
  
  const nameInput = screen.getByLabelText('name');
  const emailInput = screen.getByLabelText('email');
  const submitButton = screen.getByRole('button', { name: /add user/i });

  fireEvent.change(nameInput, { target: { value: 'John Doe' } });
  fireEvent.change(emailInput, { target: { value: 'john@example.com' } });
  fireEvent.click(submitButton);

  expect(mockAddUser).toHaveBeenCalledWith('John Doe', 'john@example.com');
});

الشرح:

• fireEvent: تستخدم لمحاكاة التفاعلات من المستخدم، مثل تغيير المدخلات أو النقر على الأزرار.
• jest.fn(): تُستخدم لإنشاء دالة محاكاة (mock function) لاختبار ما إذا كانت الدالة قد تم استدعاؤها مع القيم الصحيحة.
• screen.getByLabelText: تستخدم للعثور على العناصر بناءً على نص label المرتبط بالعنصر.

تشغيل الاختبارات:

بمجرد كتابة الاختبارات، يمكنك تشغيلها باستخدام نفس الأمر:

npm test

سيقوم Jest بتشغيل جميع الاختبارات التي تم تعريفها في الملفات التي تحتوي على .test.tsx أو .test.js.

4. أفضل الممارسات لاختبار React

• اختبر السلوك بدلاً من التفاصيل: حاول أن تختبر كيفية تفاعل المستخدم مع التطبيق بدلاً من التفاصيل الدقيقة للمكونات.
• اختبر التفاعلات: تأكد من اختبار كيفية استجابة التطبيق لتفاعلات المستخدم مثل النقرات، التغييرات، والإرسال.
• احتفظ بالاختبارات بسيطة: لا تفرط في تعقيد الاختبارات. يجب أن تكون الاختبارات بسيطة وقوية لضمان عمل المكونات كما هو متوقع.

5. الملخص

في هذا الدرس، تعلمنا أهمية اختبار الكود في React، وكيفية استخدام Jest لاختبار المكونات، وكيفية استخدام React Testing Library لاختبار واجهات المستخدم. قمنا أيضًا بكتابة اختبارات للمكونات والتأكد من أن التفاعلات تحدث بشكل صحيح، مثل إضافة مستخدم جديد عبر نموذج.