اختبار TypeScript: دليل خطوة بخطوة للمبتدئين

مدرب بايثون أونلاين للمبتدئين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

ابدأ الدورة

لماذا اختبار TypeScript ليس مخيفًا بل مفيدًا

\n\n

لقد كتبت دالة رائعة بلغة TypeScript، وشغّلت المشروع – كل شيء يعمل. بعد أسبوع، أضفت ميزة جديدة، فتعطل المنطق القديم. هل هذا مألوف؟ إذا كان الأمر كذلك، فأنت بحاجة ماسة إلى التعود على الاختبار. ولا تخف: الاختبارات ليست إلزامية مملة، بل هي "كاشف الأخطاء" الشخصي الخاص بك الذي يعمل على مدار الساعة.

\n\n

في هذه المقالة، سنشرح من أين يبدأ المبتدئ في اختبار TypeScript. ستتعلم كيفية إعداد البيئة، وكتابة أول اختبار وحدة، وعدم الارتباك في الأنواع. لا ماء – فقط ممارسة وأمثلة كود حقيقية.

\n\n

لماذا نختبر TypeScript أصلاً إذا كان آمنًا بالفعل؟

\n\n

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

\n\n
function sum(a: number, b: number): number {\n  return a - b; // خطأ! طرح بدلاً من الجمع\n}
\n\n

لن يشتكي TypeScript – الأنواع محفوظة. لكن اختبار الوحدة سيظهر فورًا أن sum(2, 2) لا يساوي 4. لذلك، اختبار TypeScript ليس ترفًا، بل ضرورة لأي مشروع جاد.

\n\n

الخطوة 1: اختيار الأداة: لماذا Jest هو أفضل صديق للمبتدئين

\n\n

هناك العديد من أطر الاختبار الشائعة في السوق: Mocha، Jasmine، Vitest، Jest. للمبتدئين، أوصي بشدة باستخدام Jest. لماذا؟

\n\n
    \n
  • يعمل "مباشرة من الصندوق" – لا حاجة لإعداد طويل.
  • \n
  • آلية mock مدمجة وتغطية الكود.
  • \n
  • دعم ممتاز لـ TypeScript عبر ts-jest.
  • \n
  • رسائل خطأ واضحة.
  • \n
\n\n

لنقم بتثبيت Jest في مشروعك. أفترض أن TypeScript مثبت لديك بالفعل. إذا لم يكن كذلك، فأنشئ مشروعًا جديدًا:

\n\n
mkdir my-ts-project\ncd my-ts-project\nnpm init -y\nnpm install typescript jest @types/jest ts-jest --save-dev
\n\n

الآن، لننشئ ملف jest.config.js في جذر المشروع:

\n\n
module.exports = {\n  preset: 'ts-jest',\n  testEnvironment: 'node',\n  roots: ['/src'],\n  testMatch: ['**/__tests__/**/*.ts', '**/?(*.)+(spec|test).ts'],\n};
\n\n

ونضيف سكريبت في package.json:

\n\n
"scripts": {\n  "test": "jest",\n  "test:watch": "jest --watch"\n}
\n\n

تم! الآن يمكننا كتابة الاختبارات.

\n\n

الخطوة 2: كتابة أول اختبار بلغة TypeScript

\n\n

لننشئ دالة بسيطة في ملف src/math.ts:

\n\n
export function add(a: number, b: number): number {\n  return a + b;\n}\n\nexport function divide(a: number, b: number): number {\n  if (b === 0) {\n    throw new Error('القسمة على صفر محظورة');\n  }\n  return a / b;\n}
\n\n

الآن، لنكتب اختبارًا لها. أنشئ مجلد src/__tests__/ وملف math.test.ts:

\n\n
import { add, divide } from '../math';\n\ndescribe('دوال الرياضيات', () => {\n  test('تجمع رقمين بشكل صحيح', () => {\n    expect(add(2, 3)).toBe(5);\n    expect(add(-1, 1)).toBe(0);\n    expect(add(0, 0)).toBe(0);\n  });\n\n  test('تقسم رقمين', () => {\n    expect(divide(10, 2)).toBe(5);\n    expect(divide(9, 3)).toBe(3);\n  });\n\n  test('ترمي خطأ عند القسمة على صفر', () => {\n    expect(() => divide(5, 0)).toThrow('القسمة على صفر محظورة');\n  });\n});
\n\n

شغّل npm test وسترى تقريرًا أخضر. تهانينا – لقد كتبت للتو أول اختبارات وحدة بلغة TypeScript!

\n\n

ماذا حدث هنا؟

\n\n
    \n
  • describe – يجمع الاختبارات في مجموعة منطقية.
  • \n
  • test أو it – حالة اختبار فردية.
  • \n
  • expect – تأكيد يتحقق من

المدونات

توصيات الكتب