Vitest؛ فریم‌ورک تست سریع پروژه‌های فرانت‌اند JavaScript و TypeScript

معرفی

Vitest یک فریم‌ورک تست مبتنی بر Vite است که برای پروژه‌های JavaScript و TypeScript استفاده می‌شود. توسعه‌دهندگان با کمک آن می‌توانند تست‌های واحد (Unit Testing) و تست‌های یکپارچه‌سازی (Integration Testing) را برای توابع، کامپوننت‌ها و بخش‌های مختلف برنامه بنویسند و اجرا کنند.

مزیت Vitest در پروژه‌های مبتنی بر Vite چیست؟

مزیت اصلی Vitest در پروژه‌های مبتنی بر Vite، امکان استفاده مجدد از تنظیمات پروژه، از جمله نام‌های مستعار مسیر و افزونه‌ها، در محیط تست است. همچنین، در حالت Watch، با تغییر فایل‌ها تست‌ها به‌صورت خودکار دوباره اجرا می‌شوند و بازخورد سریع‌تری در اختیار توسعه‌دهندگان قرار می‌گیرد. در حالت watch نیز با تغییر فایل‌ها، اجرای مجدد تست‌ها برای بازخورد سریع‌تر انجام می‌شود؛ گزینه‌ها و رفتار این حالت در راهنمای CLI توضیح داده شده‌اند.

APIهای Vitest در بسیاری موارد به Jest شباهت دارند، از جمله describe، it، expect و mock. با این حال، این شباهت به معنای مهاجرت بی‌دردسر نیست. پیش از انتقال یک پروژه Jest، matcherها، mockها، تنظیمات محیط تست و وابستگی‌های ویژه Jest را در یک شاخه آزمایشی بررسی کنید. راهنمای مهاجرت رسمی تفاوت‌ها و مسیرهای سازگاری را توضیح می‌دهد.

شروع سریع با Vitest

  1. در پروژه JavaScript یا TypeScript، Vitest را با دستور npm install -D vitest نصب کنید.

  2. در بخش scripts فایل package.json، اسکریپت test را با مقدار vitest تعریف کنید.

  3. یک فایل مانند src/sum.test.ts بسازید. الگوی پایه تست شامل describe برای گروه‌بندی، it برای تعریف رفتار و expect برای بررسی نتیجه است؛ برای نمونه، describe('sum', () => { it('adds numbers', () => { expect(sum(1, 2)).toBe(3) }) }).

  4. دستور npm test را اجرا کنید. اگر خروجی تست را passed نشان داد و فرایند با کد خروج ۰ پایان یافت، نخستین تست شما با موفقیت اجرا شده است.

برای پروژه‌های Vite، کتابخانه‌های React یا Vue و تیمی که بازخورد سریع هنگام تغییر کد می‌خواهد، Vitest معمولاً انتخاب طبیعی‌تری از Jest است. اما اگر پروژه به پیکربندی قدیمی Jest، transformerهای اختصاصی یا افزونه‌های وابسته به Jest متکی است، هزینه بررسی و سازگاری مهاجرت را پیش از تصمیم‌گیری بسنجید.

Vitest جایگزین تست سرتاسری نیست. برای آزمودن جریان واقعی کاربر در مرورگر، مانند ورود، پرداخت یا تعامل میان چند صفحه، معمولاً به ابزار جداگانه تست انتهابه‌انتها نیاز دارید. برای گزارش پوشش کد نیز پیکربندی مشخص لازم است؛ روش‌های رسمی در راهنمای Coverage آمده‌اند.

ویژگی‌های کلیدی

برای آشنایی بهتر با این ابزار، توجه به موارد زیر می‌تواند مفید باشد.

  • یکپارچگی با Vite

    تنظیمات Vite مانند نام‌های مستعار مسیر، متغیرهای محیطی و افزونه‌ها را در محیط تست به‌کار می‌گیرد؛ بنابراین در پروژه‌های Vite پیکربندی تکراری کمتر می‌شود.

  • اجرای سریع و حالت Watch

    در حالت watch، پس از تغییر فایل‌ها تست‌های مرتبط دوباره اجرا می‌شوند تا توسعه‌دهنده سریع‌تر اثر تغییر کد را بررسی کند.

  • API مشابه و سازگاری گسترده با Jest

    توابعی مانند describe، it، expect و mock را ارائه می‌دهد و خواندن بسیاری از تست‌های Jest را آسان‌تر می‌کند. پیش از مهاجرت، matcherها، mockها، تنظیمات و وابستگی‌های Jest را در یک شاخه آزمایشی بررسی کنید.

  • پشتیبانی از TypeScript

    برای نوشتن و اجرای تست در پروژه‌های TypeScript طراحی شده است و در پروژه‌های Vite معمولاً به فرایند تبدیل جداگانه برای فایل‌های تست نیاز ندارد.

  • Mock و Spy داخلی

    امکان جایگزین‌کردن وابستگی‌ها، مشاهده فراخوانی توابع و کنترل پاسخ ماژول‌ها را برای تست رفتارهای مستقل فراهم می‌کند.

  • پوشش کد

    می‌تواند گزارش پوشش کد تولید کند تا تیم ببیند کدام مسیرهای برنامه توسط تست‌ها اجرا شده‌اند؛ پوشش بالا به‌تنهایی نشانه کیفیت تست نیست.

کاربردها

در ادامه، مهم‌ترین موارد این بخش به تفکیک معرفی شده‌اند.

  • تست منطق مستقل رابط کاربری

    برای بررسی توابع اعتبارسنجی فرم، تبدیل داده، محاسبات قیمت، مدیریت خطا و دیگر منطق‌هایی که بدون مرورگر هم قابل اجرا هستند.

  • تست کامپوننت‌های React یا Vue

    برای اطمینان از نمایش درست حالت‌ها، واکنش به تعامل کاربر و فراخوانی تابع‌های بازخوانی، معمولاً همراه با کتابخانه‌های تست کامپوننت و پیکربندی محیط DOM.

  • محافظت از رفتار هنگام بازطراحی

    پیش از تغییر ساختار یک ماژول یا کامپوننت، تست‌های موجود رفتار فعلی را ثبت می‌کنند و خطاهای ناخواسته را آشکار می‌سازند.

  • تست ماژول‌های مشترک پروژه

    برای بررسی توابع و ابزارهای مشترکی که هم در بخش‌های مختلف فرانت‌اند و هم گاهی در کدهای سمت سرور استفاده می‌شوند.

  • پروژه‌های مبتنی بر Vite

    وقتی پروژه از Vite استفاده می‌کند و تیم می‌خواهد پیکربندی ساخت و تست هم‌راستا باشد، Vitest معمولاً نسبت به افزودن یک runner با پیکربندی مستقل، انتخاب ساده‌تری است.

پرسش‌های رایج درباره Vitest

در این بخش، به تعدادی از پرسش‌های رایج درباره این ابزار پاسخ داده شده است.

آیا Vitest فقط برای پروژه‌های Vite است؟

خیر، اما بهترین تجربه آن معمولاً در پروژه‌های مبتنی بر Vite است؛ چون می‌تواند تنظیمات همان پروژه را مستقیماً استفاده کند.

تفاوت Vitest و Jest چیست؟

هر دو برای تست JavaScript و TypeScript کاربرد دارند. Vitest با اکوسیستم Vite یکپارچه است و API آن در بسیاری بخش‌ها شبیه Jest است. انتخاب میان آن‌ها به ابزار ساخت پروژه، تنظیمات فعلی و وابستگی‌های تیم بستگی دارد.

آیا برای یادگیری Vitest، آشنایی با Jest ضروری است؟

خیر. آشنایی با مفاهیم تست واحد، assertion، mock و ساختار arrange-act-assert مهم‌تر است. تجربه Jest فقط یادگیری API را سریع‌تر می‌کند.

آیا Vitest جایگزین تست انتهابه‌انتها است؟

خیر. Vitest عمدتاً برای تست واحد و یکپارچه‌سازی مناسب است. برای بررسی جریان واقعی کاربر در مرورگر، معمولاً به ابزارهای تست انتهابه‌انتها نیاز دارید.

آموزش‌های مرتبط در فرادرس

منابع پیشنهادی

برچسب‌ها و کلیدواژه‌ها