تست زاویه ای در سال 2023 – گذشته، حال و آینده

Angular 16 کارما را منسوخ کرده و Jest را در حالت آزمایشی معرفی کرده است. آیا این بدان معناست که ما در حال حاضر هیچ چارچوب آزمایشی پایداری نداریم؟ آیا باید به جست سوئیچ کنیم؟ در وهله اول کارما چه اشکالی دارد؟

در این مقاله می خواهم به این سوالات و سوالات دیگر پاسخ دهم.

ابتدا بیایید نگاهی به وضعیت قبل از Angular 16 بیندازیم. من به تفاوت های جست و یاس می پردازم و نقش کارما را توضیح می دهم. سپس به جست می پردازیم و بحث می کنیم که چرا راه حل های مبتنی بر جامعه فعلی می توانند بهینه تر باشند. در نهایت، به آینده نگاه خواهیم کرد و خواهیم دید که Angular چه چیزی را روی میز آورده است.

منظره تست زاویه ای

به طور کلی، ما از دو نوع فریم‌ورک مختلف برای آزمایش برنامه‌های Angular خود استفاده می‌کنیم: یکی برای تست‌های واحد/کامپوننت و دیگری برای تست E2E. ما از چارچوب هایی مانند Cypress، Playwright یا برخی از مشتقات Webdriver مانند Selenium یا WebDriverIO برای دومی استفاده می کنیم.

وقتی نوبت به تست کامپوننت می رسد، همپوشانی هایی وجود دارد زیرا Cypress نیز از آن پشتیبانی می کند.

برای تست های واحد/کامپوننت، از Jasmine یا Jest استفاده می کنیم. پشتیبانی رسمی Angular CLI همیشه Jasmine بوده است. اگر می‌خواستیم به Jest سوئیچ کنیم، معمولاً با Nx می‌رفتیم یا از سازنده just-jeb/angular-builder استفاده می‌کردیم.

شوخی یا یاس؟

در انگولار، جاسمین همیشه با کارما همراه می شود. Karma به عنوان وسیله ای برای Jasmine عمل می کند که تست ها را در مرورگر جاسازی می کند. زمینه مرورگر این مزیت را دارد که آزمایش‌ها به Web API و هر چیز دیگری که مرورگر ارائه می‌دهد دسترسی دارند. از طرف دیگر، مرورگر مقداری سربار اضافه می کند.

Jest یک جایگزین ارائه می دهد. ما می‌توانیم ریشه‌های جست را در فیس‌بوک پیدا کنیم. آنها یاسمین را چنگال کردند و از نظر عملکرد آن را بهبود بخشیدند.

به جای مرورگر، Jest از jsdom استفاده می‌کند، شبیه‌سازی که یک DOM را با بخش‌هایی از Web API فراهم می‌کند که به ما امکان می‌دهد خود DOM را انتخاب کرده و با آن تعامل داشته باشیم. با توجه به شبیه ساز، سربار در مقایسه با یک مرورگر واقعی بسیار کمتر است. از طرف دیگر، ما عملکرد محدودی در دسترس داریم. به عنوان مثال، ما نمی توانیم موسیقی را از طریق برچسب صوتی پخش کنیم یا چیزی را در حافظه محلی ذخیره کنیم. با این حال، در بیشتر موارد، این با آنچه ما می خواهیم در آزمایشات انجام دهیم متفاوت است.

“ویژگی های قدرت” اضافی موازی سازی داخلی و حالت تماشای عالی است. حالت ساعت فقط تست هایی را اجرا می کند که تحت تأثیر تغییرات فعلی قرار می گیرند. اگر ما 10000 تست داشتیم، اما تغییرات اخیر ما تنها 10 مورد از آنها را تحت تاثیر قرار می دهد، Jest فقط آنها را اجرا می کند.

این ویژگی‌ها Jest را نه تنها در Angular بلکه کم و بیش در کل سرزمین جاوا اسکریپت به چارچوب آزمایشی غالب تبدیل کرد.

نقطه ضعف Jest: ماژول های ES

متأسفانه در چند سال اخیر شاهد پیغام‌های خطای عجیبی مانند «واردات تعریف نشده» بودیم و افت عملکرد قابل توجهی را تجربه کردیم.

معلوم شد که ادغام Jest در Angular در سطح Jasmine نیست. Jest باید کامپایل را به تنهایی انجام دهد. بنابراین کد منبع تست های ما را دریافت می کند و در مورد Angular آن را به جاوا اسکریپت کامپایل می کند.

کامپایلر Angular، که در بالای کامپایلر TypeScript اجرا می شود، مسئول آن است. در مورد تمام ابرداده ها و معنای آن برای کد نهایی می داند.

چگونه در Jest کار می کند؟ سس مخفی پروژه شوخی-زاویه-پیش تنظیم شده است. تمام منطق را حفظ می کند، و Nx و just-jeb/angular-builders به ​​آن وابسته هستند.

متأسفانه، jest-angular-preset همه مشکلات مربوط به فرآیند ساخت Jest را برطرف نمی کند.

وارد شدن به ماژول های ECMAScript یا ESM. این استاندارد رسمی برای بارگیری فایل های جاوا اسکریپت و به نوعی جانشین CommonJS (CJS) است. بسیاری از کتابخانه های شخص ثالث وارد قطار ESM شدند و به طور انحصاری در آن قالب منتشر شدند. Angular به خصوص کتابخانه‌های خود را به سمت تولید فرمت ESM سوق داد.

جست با کف پای صاف دستگیر شد. فقط CJS قدیمی را درک می کرد. کامپایل کردن کد تست و برنامه ما به CJS مشکل چندانی برای Jest نبود. مشکل در دایرکتوری node_modules است، به خصوص در Angular و کتابخانه های آن، که دیگر در CJS نیستند.

جست مجبور شد این حجم عظیم کد را از ESM به CJS انتقال دهد. این به طور قابل توجهی سرعت Jest را کاهش داد. بنابراین جای تعجب نیست که Jasmine – جایی که Angular مسئولیت ساخت را بر عهده دارد – به طور ناگهانی از Jest بهتر عمل کرد.

علاوه بر این، همچنین مشخص شد که فقط یک نفر مسئول توسعه Jest است. فیس بوک/متا آخرین کد ارائه شده چند سال پیش است. بنابراین سیمن بخن مجبور شد جست را به تنهایی کنار هم نگه دارد. و اگر اوضاع به اندازه کافی بد نبود، از روند استانداردسازی ESM ناامید شد و مدتی مرخصی گرفت.

بیایید به سمت امروز حرکت کنیم. Jest اکنون بخشی از OpenSource Foundation است و مشارکت کنندگان زیادی دارد. سیمن در حال کار بر روی پشتیبانی ESM برای Jest است. هنوز آزمایشی است، اما افزونه های انجمن Angular قبلاً به طور پیش فرض از آن استفاده می کنند.

وضعیت خیلی بهتر است. با این وجود، هنوز برخی از احتمالات برای افتادن در تله عملکرد وجود دارد. توماس تراژان یک مقاله کامل را به این مشکل اختصاص داد.

حالت Jest آزمایشی در Angular CLI

بیایید به زمان حال. ما می بینیم که Jest در حال بهبودی است، به شکل قدیمی خود می رسد … و ناگهان، تیم Angular وارد می شود.

نظرسنجی Angular Developer نشان داد که امکان بهبود در آزمایش وجود دارد. بنابراین، با نگاهی به چشم انداز آزمایش، تیم Angular تصمیم گرفت به طور رسمی از Jest پشتیبانی کند.

در حال حاضر، این در حالت آزمایشی است. ما می توانیم آن را امتحان کنیم، اما نباید انتظار زیادی داشته باشیم. حالت آزمایشی با پیش‌نمایش توسعه‌دهنده‌ای که در Angular 14 برای اجزای مستقل دیده‌ایم، هم سطح نیست. ما باید آن را بیشتر به عنوان یک اثبات مفهوم ببینیم.

ادغام رسمی Jest مسیر Nx & Co را طی نخواهد کرد. Jest دیگر مسئول ساخت نخواهد بود. Angular بر عهده می گیرد.

این بدان معناست که Jest یک دسته فایل *.mjs دریافت می کند. نیازی به پیمایش در node_modules، transpiling و غیره نیست. در عوض، Jest می‌تواند بلافاصله اجرا را شروع کند.

و این تمام آن نیست. به عنوان مثال، Angular از esbuild جدید به جای وب پک استفاده می کند. گفته می شود Esbuild در برخی شرایط 50 تا 100 برابر از Webpack بهتر عمل می کند. همچنین چندین بار خود را ثابت کرده است. به عنوان مثال، Vitest و Vite از آن به صورت داخلی استفاده می کنند. هر دوی آنها به خاطر عملکردشان که از esbuild دریافت می کنند، شناخته شده اند.

بنابراین می توان گفت که وضعیت فعلی تست در Angular به این صورت است:

جابجایی به Jest

در اینجا این است که چگونه می توانید آن را امتحان کنید.

• خودت را باز کن angular.json و سازنده را جایگزین کنید test، که باید دارای ارزش باشد @angular-devkit/build-angular:karma به @angular-devkit/build-angular:jest.
• وابستگی های لازم را از طریق نصب کنید npm install -D jest @types/jest jest-environment-jsdom.
• را بیابید tsconfig.spec.json و مقدار را جایگزین کنید jasmine در ملک types با jest.

حالا فقط اجرا کنید npx ng test. باید ببینید که Angular builder یک پوشه test-out در dist ایجاد کرده است که فایل های آزمایشی شما با mjs به عنوان پسوند فایل است. این مکانی است که Jest در آن اجرا می شود.

شما هنوز نمی خواهید از آن در تولید استفاده کنید. حالت تماشای Jest در دسترس نیست، IDE شما آزمایش ها را اجرا نمی کند، و نمی توانید Jest را از طریق jest.config.ts سفارشی کنید.

یاس و مدرن وب

در مورد تحقیر کارما چطور؟ وظیفه Karma این است که یک مرورگر را راه اندازی کند و تست های Jasmine را جاسازی کند. پس بی ارزش شدن کارما به این معنی نیست که یاسمن منسوخ شده است.

علاوه بر این، در Angular 16، کارما هنوز کاملاً کاربردی است. بنابراین تست های موجود شما همچنان مانند گذشته کار خواهند کرد.

در نسخه آینده، Angular جایگزین Karma با وب تست اجرا کننده از ModernWeb خواهد شد. این نسخه آینده ممکن است قبلاً Angular 17 باشد. ModernWeb یک پروژه اجتماعی مدرن است که آزمایش ها را در یک مرورگر تعبیه می کند.

حتی ممکن است تغییر از Karma به ModernWeb مورد توجه قرار نگیرد. نباید کاری برای ما باقی بماند. اما بیایید ببینیم آیا واقعاً اینطور می شود 😉

سوال جالب تر این است که چرا؟

کارما از Angular 1 (AngularJs) وجود داشته است. میسکو هیوری، که به عنوان “پدر انگولار” نیز شناخته می شود، نویسنده همکار آن بود و کارما کم و بیش منحصرا برای انگولار بود.

مدت زیادی از تکامل AngularJs و اکوسیستم می گذرد. با پروژه های اجتماعی مانند web-test-runner، دیگر نیازی نیست که تیم Angular به Karma پایبند باشد.

بنابراین، آینده قابل پیش بینی آزمایش Angular ترکیبی از Jasmine/WebTestRunner (ModernWeb) و Jest را ارائه می دهد.

خلاصه

در سال 2023، انگولار با سیگنال ها و هیدراسیون گام های بزرگی به جلو برداشت. از نظر تست، Angular نیز در حال افزایش سرعت است. Jest را ادغام می کند تا Angular کل ساخت را ارائه دهد و Jest فقط باید آن تست ها را اجرا کند. در راه حل های فعلی جامعه، جست نیز باید آن را می ساخت که در گذشته مشکلاتی را ایجاد می کرد.

Jasmine یک چارچوب تست پشتیبانی خواهد بود. با این حال، آن را به روشی که وب تست-راننده و نه Karma زمینه مرورگر را فراهم می کند، مدرن می شود.

به هر کجا که نگاه کنیم، اتفاقات خوبی در Angular رخ می دهد!

می توانید یک مخزن Github حاوی تمام تغییرات ممکن در Angular 16 پیدا کنید.

اگر علاقه مند به مطالب بیشتر در مورد تست هستید، ممکن است بخواهید به یکی از کارگاه های تست آتی ما بپیوندید:

angulararchitects.io