اختبار TypeScript: دليل شامل للأطر والأدوات

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

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

ابدأ الدورة

اختبار TypeScript: أطر وأدوات للتطوير عالي الجودة



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



لماذا اختبار كود TypeScript؟

مترجم TypeScript يكتشف أخطاء الأنواع، لكنه لا يتحقق من منطق الأعمال. تساعد الاختبارات في:

  • اكتشاف الانحدار عند إعادة الهيكلة
  • توثيق السلوك المتوقع للدوال
  • تسريع مراجعة الكود بفضل التحقق التلقائي
  • زيادة الثقة في عمل التطبيق


الفئات الرئيسية للاختبار

  • اختبارات الوحدة — التحقق من الدوال أو الفئات أو الوحدات الفردية.
  • اختبارات التكامل — التفاعل بين الوحدات (مثل قاعدة البيانات).
  • اختبارات E2E — محاكاة إجراءات المستخدم في المتصفح.


1. Jest — إطار عمل شامل لاختبارات الوحدة

Jest من Facebook هو الخيار الأكثر شيوعًا لـ TypeScript. يعمل "مباشرة من الصندوق": لا يتطلب تكوينًا معقدًا، ويحتوي على محرك mock مدمج وتقرير تغطية الكود.



التثبيت:

npm install --save-dev jest @types/jest ts-jest

أضف إلى jest.config.ts:

export default {  preset: 'ts-jest',  testEnvironment: 'node',};


مثال اختبار وحدة لدالة:

// math.tsexport const add = (a: number, b: number): number => a + b;

// math.test.tsimport { add } from './math';

describe('add', () => { it('should return sum of two numbers', () => { expect(add(2, 3)).toBe(5); });

it('should handle negative numbers', () => { expect(add(-1, -2)).toBe(-3); });});


الكائنات الوهمية (mocks) في Jest:

// api.tsexport const fetchData = async (id: string) => {  const response = await fetch(`/api/${id}`);  return response.json();};

// api.test.tsjest.mock('./api', () => ({ fetchData: jest.fn().mockResolvedValue({ id: '1', name: 'Test' }),}));

import { fetchData } from './api';

test('should return mocked data', async () => { const data = await fetchData('1'); expect(data.name).toBe('Test');});


2. Mocha + Chai — بديل مرن

Mocha هو مشغل اختبارات يمنحك تحكمًا كاملاً في العملية. يضيف Chai تأكيدات معبرة (assertions).



التثبيت:

npm install --save-dev mocha chai @types/mocha @types/chai ts-node


مثال اختبار تكامل مع عدم التزامن:

// database.tsexport class Database {  async getUser(id: number): Promise<{ id: number; name: string }> {    // محاكاة الاستعلام    return { id, name: 'Alice' };  }}

// database.test.tsimport { expect } from 'chai';import { Database } from './database';

describe('Database', () => { it('should return user by id', async () => { const db = new Database(); const user = await db.getUser(1); expect(user).to.have.property('name', 'Alice'); });});


للتشغيل، استخدم الأمر mocha --require ts-node/register src/**/*.test.ts.



3. Cypress — اختبار E2E لتطبيقات الويب

Cypress مثالي لاختبار الواجهة الأمامية بلغة TypeScript. يعمل في متصفح حقيقي وله واجهة رسومية سهلة الاستخدام.



التثبيت:

npm install --save-dev cypress @cypress/types


مثال اختبار E2E لصفحة تسجيل الدخول

توصيات