تغطية الكود بالاختبارات في TypeScript: أفضل الأدوات والمقاييس

تغطية الكود بالاختبارات في TypeScript: كيف تتوقف عن التخمين وتبدأ القياس

تخيل أنك تقوم بتجميع آلية معقدة تحتوي على العديد من التروس. أنت متأكد من أنك قمت بتجميع كل شيء بشكل صحيح، ولكن بمجرد الضغط على زر "تشغيل"، تسمع صريراً وتتعطل الآلية. هل هذا الموقف مألوف؟ في عالم تطوير TypeScript، هذه "الآليات" هي تطبيقاتنا. وتغطية الكود بالاختبارات هي عملية التجميع التجريبي التي تُظهر أي الأجزاء قمنا بفحصها وأيها تركنا للصدفة.

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

ما هي تغطية الكود ولماذا TypeScript ليس استثناءً

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

المقاييس الرئيسية للتغطية التي يجب معرفتها:

\n
• Line coverage — النسبة المئوية لأسطر الكود التي تم تنفيذها مرة واحدة على الأقل.
\n
• Branch coverage — النسبة المئوية للتفرعات (if/else، switch، العوامل الثلاثية) التي تم اختبارها.
\n
• Function coverage — النسبة المئوية للدوال/الطرق التي تم استدعاؤها.
\n
• Statement coverage — النسبة المئوية للتعليمات الفردية (العوامل) في الكود.
\n

بالنسبة لمشاريع TypeScript، تعتبر branch coverage مهمة بشكل خاص، لأن الكتابة الصارمة (strict typing) لا تحمي من الأخطاء المنطقية في الشروط. يمكنك كتابة جميع المتغيرات بشكل صحيح، ولكن قد تنسى الحالة التي تكون فيها المصفوفة فارغة، بينما تتوقع الدالة عنصراً واحداً على الأقل.

أدوات قياس التغطية في TypeScript

1. Istanbul (nyc) — جد كل التغطيات

Istanbul هي الأداة الأكثر شيوعاً لقياس تغطية كود JavaScript وTypeScript. تعمل كأداة مساعدة مستقلة (عبر الحزمة nyc) أو كوحدة مدمجة في أطر الاختبار.

لبدء العمل مع Istanbul في مشروع TypeScript، قم بتثبيت:

npm install --save-dev nyc typescript ts-node

أنشئ ملف .nycrc للتكوين:

{\n  "extends": "@istanbuljs/nyc-config-typescript",\n  "all": true,\n  "include": ["src/**/*.ts"],\n  "exclude": ["src/**/*.test.ts", "src/**/*.spec.ts"],\n  "reporter": ["text", "html", "lcov"],\n  "check-coverage": true,\n  "branches": 80,\n  "lines": 85,\n  "functions": 85,\n  "statements": 85\n}

تشغيل الاختبارات مع التغطية:

npx nyc mocha --require ts-node/register src/**/*.test.ts

يقوم Istanbul بإنشاء تقارير في وحدة التحكم (text) وفي شكل صفحات HTML، حيث يتم تمييز الكود المُغطى باللون الأخضر، والكود غير المُغطى باللون الأحمر. هذا واضح جداً.

2. Jest — كل شيء في واحد

Jest هو إطار الاختبار الأكثر شيوعاً لـ TypeScript. وهو يتضمن بالفعل أداة تغطية مدمجة تعتمد على Istanbul. لا تحتاج إلى تثبيت أي شيء إضافي.

الإعداد الأساسي في jest.config.ts:

import type { Config } from 'jest';\n\nconst config: Config = {\n  preset: 'ts-jest',\n  testEnvironment: 'node',\n  collectCoverage: true,\n  coverageDirectory: 'coverage',\n  coverageReporters: ['text', 'html', 'lcov'],\n  collectCoverageFrom: [\n    'src/**/*.ts',\n    '!src/**/*.test.ts',\n    '!src/**/*.spec.ts',\n    '!src/types/**/*.ts'\n  ],\n  coverageThresho