بهترین روش ها برای آزمایش برنامه های React

جامعه React مملو از توسعه دهندگانی است که مشتاق حفظ شیوه های توسعه خوب از طریق آزمایش هستند. بسیاری از ابزارها و تکنیک های عالی برای کمک به نوشتن تست های برنامه React خود در دسترس هستند، اما برای انجام درست آن. شما باید بهترین شیوه ها را دنبال کنید.

این راهنما اصول اولیه تست در React را مورد بحث قرار می‌دهد، از جمله اینکه چرا بسیار مهم است، کدام ابزار در دسترس است و بهترین روش‌ها برای نوشتن تست‌ها.

تست چیست؟

آزمایش فرآیند تأیید این است که چیزی با الزامات ارائه شده مطابقت دارد و نتایج مورد نظر را تولید می کند. در برنامه نویسی، این به این معنی است که مطمئن شوید کد شما همانطور که انتظار می رود کار می کند.

دو راه برای آزمایش برنامه شما وجود دارد:

تست دستی

این نوع آزمایش زمانی است که یک انسان آزمایشات را گام به گام بر روی یک برنامه بدون کمک ابزارها و اسکریپت های آزمایشی انجام می دهد. تحلیلگران QA اغلب از این رویکرد برای رسیدگی به موارد آزمایشی پیچیده استفاده می‌کنند که امکان خودکارسازی یا شامل سناریوهایی وجود دارد که فقط یک بار می‌توانند تأیید شوند.

تست خودکار

شامل نوشتن اسکریپت هایی است که به طور خودکار کد شما را برای اطمینان از اینکه از پیش تعریف شده شرایط به درستی برآورده شده است. چندین مورد آزمایشی را کنترل می کند که به راحتی قابل پیش بینی هستند یا به طور مکرر تأیید می شوند.

چرا آزمایش اینقدر مهم است؟

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

برخی از دلایل دیگر برای آزمایش عبارتند از:

• این به شما کمک می کند تا سهولت استفاده از برنامه خود را ارزیابی کنید (چقدر آسان است که کاربر از برنامه شما استفاده کند).
• تأیید می کند که تمام جنبه های برنامه شما همانطور که انتظار می رود کار می کنند. همچنین می تواند شرایط غیرمنتظره مانند حملات دزدی دریایی یا انواع داده های نادرست را بررسی و رفع کند.
• این یک راه عالی برای ارائه اسناد به روز کد شما است.
• مقرون به صرفه است زیرا شناسایی و رفع اشکال در طول توسعه به طور قابل توجهی ارزان تر از رفع آن در تولید است، پس از اینکه بسیاری از کاربران را تحت تأثیر قرار داد.
• آزمایش افزودن ویژگی‌های جدید به برنامه شما را آسان‌تر می‌کند، زیرا اگر چیزی در کد قدیمی شکسته شود، می‌توانید به سرعت آن را شناسایی و برطرف کنید.

تست مدرن در React

آزمایش راه طولانی را طی کرده است. در طول سال‌ها، اصول مختلفی در مورد نحوه نوشتن آزمایش‌ها توسط توسعه‌دهندگان پدیدار شده است. یک راهنمای مدرن و عالی که هنگام آزمایش برنامه React خود باید دنبال کنید، از “Testing Trophy” پیشنهاد شده توسط کنت سی دادز استفاده کنید. این به طور کلی چهار نوع آزمون را تشریح می کند: آزمون های ایستا، واحد، ادغام و پایان به انتها (e2e).

تست های استاتیک

این تست‌ها با اسکن کردن خطاهای جزئی مانند اشتباهات تایپی یا فقدان نیم دونقطه، به تمیز نگه داشتن پایگاه کد شما کمک می‌کنند. آنها همچنین می توانند برای بهبود بهره وری شما رفع فوری ارائه دهند. ابزارهای محبوب برای تست استاتیک عبارتند از Prettier، ES Lint و Mocha.

تست های واحد

زمانی که می خواهید هر قطعه کوچک و جدا شده از کد خود را به طور مستقل آزمایش کنید، تست های واحد بنویسید. این تست ها به شما یک نمای دانه ای از عملکرد کد شما می دهند و از آنجایی که بسیار کوچک هستند می توانند بسیار سریع اجرا شوند. آنها اغلب در Test Driven Development (TDD) استفاده می شوند، جایی که ابتدا آزمون را می نویسید، سپس کد خود را برای قبولی آن می نویسید.

تست های یکپارچه سازی

تست های یکپارچه سازی اطمینان حاصل می کنند که اجزای مختلف در برنامه React شما با هم کار می کنند و به درستی با هم تعامل دارند. این نوع آزمایش هنگام همکاری با توسعه دهندگان دیگر در یک پروژه سودمند است، زیرا افراد مختلفی روی اجزای مختلف کار می کنند. با تست های یکپارچه سازی، می توانید تأیید کنید که این مؤلفه ها به خوبی با یکدیگر کار می کنند و حتی با اشخاص ثالث مانند API ها و پایگاه های داده کار می کنند.

تست های پایان به انتها

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

ابزارهای رایج تست واکنش

چندین ابزار تست برای React وجود دارد. در اینجا چند مورد محبوب وجود دارد:

است

این چارچوب تست جاوا اسکریپت ابزارهایی را برای تمسخر داده ها و پخش مجدد رویدادها فراهم می کند که می تواند در تست های واحد بسیار مفید باشد. برای مبتدیان مناسب است و برای کاربرانی که اولین بار هستند به تنظیمات زیادی نیاز ندارد.

ویژگی های آن عبارتند از:

• API هایی مانند expect()و توابع تطبیق مانند toBe()، toEqual()، toMatch() و toThrow(). اینها برای ارزیابی شرایط آزمون با هم کار می کنند.
• استثناهای غنی (پیام های خطا) که زمینه ای را در مورد علت شکست آزمون شما نشان می دهد.
• توابع ساختگی برای تمسخر اشیاء خارج از محدوده آزمون شما.
• اجرای تست ها به صورت موازی و اولویت بندی تست ها برای بهبود سرعت و کارایی.

کتابخانه تست واکنش

این ابزار ابزار آزمایشی APIهایی را برای کار با اجزای React به کتابخانه تست DOM اضافه می کند. تمام پروژه های React ایجاد شده با create-react-app React Testing Library را به صورت پیش فرض داشته باشید.

ویژگی های آن عبارتند از:

• توابع سودمند مانند render()، renderHook() و cleanup() برای کار با react-dom و react-dom/test-utils به گونه ای که روش های تست بهتر را تشویق می کند.
• از پرس و جو از DOM به روشی که یک کاربر معمولی آن را انجام می دهد پشتیبانی می کند.
• می توانید از آن همراه با Jest برای نوشتن تست های واحد و ادغام استفاده کنید.

موکا

این اجرا کننده تست منبع باز در Node.js نوشته شده است. هر نسخه موکا حاوی یک mocha.js و mocha.css فایل و به شما امکان می دهد جاوا اسکریپت ناهمزمان را در مرورگر خود آزمایش کنید.

برخی دیگر از ویژگی های آن عبارتند از:

• پشتیبانی ساده از همگام سازی با افزودن a فعال می شود done استدلال به شما it() پاسخ به تماس یا بازگشت یک قول به جای پاسخ به تماس.
• پشتیبانی از ماژول های ES6 (جدید در نسخه 7.1.0).
• قلاب هایی مانند before()، after()، beforeEach()، و afterEach() شما را قادر می سازد پیش شرط ها را تنظیم کرده و پس از آزمایش ها را تمیز کنید.
• امکان اضافه کردن هر کتابخانه ادعایی به انتخاب شما. گزینه های محبوب Expect.js و Chai هستند.

سرو

Cypress یک چارچوب جاوا اسکریپت منبع باز محبوب برای اجرای تست های سرتاسر است. برای تمام زبان های برنامه نویسی، پلتفرم ها و مرورگرها کار می کند.

ویژگی های آن عبارتند از:

• امکان اشکال زدایی کد در مرورگر شما.
• عکس‌های فوری از آزمایش شما در حین اجرا، که به شما امکان می‌دهد ببینید در هر مرحله از فرآیند چه اتفاقی افتاده است.
• اسکرین شات ها و ویدیوهای آزمایش های ناموفق برای مستندسازی اشکالات.
• به طور خودکار در انتظار دستورات و ادعاها. این ویژگی به پیشگیری کمک می کند async مسائل

بهترین روش ها برای آزمایش برنامه های React

در اینجا برخی از بهترین روش ها برای آزمایش برنامه های React آورده شده است:

قابلیت های بیشتر را تست کنید، جزئیات پیاده سازی کمتری را انجام دهید

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

• قطعاتی که برای کاربر نهایی قابل مشاهده است و حاوی قابلیت ها که کاربر می تواند با آنها تعامل داشته باشد، مانند رابط کاربری، داده های وضعیت و غیره. به عنوان مثال، وقتی کاربر روی یک دکمه کلیک می کند، چه چیزی روی صفحه نمایش داده می شود.
• معمولاً قطعاتی که برای کاربر نهایی شما قابل مشاهده نیستند جزئیات پیاده سازی مانند نام متغیرها، کلاس‌ها، پروپوزال‌ها و غیره. آنها می‌توانند هر چیزی باشند، به شرطی که همان عملکردهای مورد انتظار کاربر را ارائه دهند.

اگر برای نام متغیر تست بنویسید (یک جزئیات پیاده سازی) و بعداً نام متغیر در کد خود را بدون به روز رسانی تست ها به روز کنید، کد شما همچنان همانطور که انتظار می رود کار می کند، اما تست ها ناموفق خواهند بود. این سناریو به عنوان یک منفی کاذب شناخته می شود.

فرض کنید نام متغیر را تغییر نداده اید، اما عملکردی دارید که وقتی کاربر روی دکمه ای کلیک می کند، متنی را روی صفحه نمایش می دهد و آن تابع را به درستی فراخوانی نکرده اید (عملکرد بد). اگر آزمایش‌هایی را روی جزئیات پیاده‌سازی خود اجرا کنید، می‌گذرد، اما برنامه شما در تولید شکست می‌خورد زیرا عملکرد آن معیوب است. این سناریو به عنوان مثبت کاذب شناخته می شود.

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

تست های ادغام چندگانه

در برنامه React خود، کامپوننت های زیادی را خواهید ساخت که به طور متفاوتی تعامل دارند. به عنوان مثال، یک جزء دکمه می تواند با یک فرم تماس برای دریافت و آپلود داده های کاربر کار کند و همان دکمه به عنوان یک فراخوان برای اقدام در صفحه اصلی کار می کند.

برای اطمینان از اینکه این ادغام ها همانطور که انتظار می رود کار می کنند، باید تست های یکپارچه سازی بنویسید تا بررسی کنید که چگونه اجزای شما با یکدیگر در زمینه ها و سناریوهای مختلف و حتی با API های خارجی تعامل دارند.

هر بار یک چیز را تست کنید

هنگام نوشتن تست برای برنامه React خود، برای جلوگیری از تداخل و اطمینان از اینکه تمام بخش های ضروری برنامه شما به طور کامل تست شده اند، بهتر است فهرستی از مواردی که باید برای آنها تست کنید و لیست را یکبار بررسی کنید.

این تمرین به شما کمک می کند تا مجموعه های آزمایشی خود را کوچکتر و قابل کنترل تر نگه دارید تا تغییرات در طول بررسی کد راحت تر قابل مشاهده باشند.

از آزمایشات غیر ضروری خودداری کنید

این مثال زیر را در نظر بگیرید:

test('modal is visible', () => {});
test ('modal displays message', () => {});

در کد بالا، شما تست می کنید تا ببینید آیا یک مدال پیامی را نمایش می دهد یا خیر. برای اینکه مودال آن پیام را نمایش دهد، باید قابل مشاهده باشد، بنابراین اولین آزمایش غیر ضروری است و می توان با خیال راحت آن را حذف کرد.

توسعه‌دهندگان اغلب تشویق می‌شوند تا پوشش ۱۰۰٪ کد را هدف قرار دهند، اما این می‌تواند شما را به سمت سوراخ خرگوش بکشد و باعث شود زمان بیشتری را برای نوشتن تست‌های غیر ضروری صرف کنید. همچنین می تواند منجر به از دست دادن سناریوهای مهمی شود که احتمالاً نقص دارند زیرا هدف شما این است که اطمینان حاصل کنید که هر خط کد آزمایش شده است.

بهتر است بر روی نوشتن تست‌هایی تمرکز کنید که واقعاً مهم هستند تا مطمئن شوید برنامه شما همانطور که در نظر گرفته شده است کار می‌کند، سپس به طور مداوم آن کد و تست‌های آن را بهبود ببخشید.

نتیجه

تست بخشی ضروری از فرآیند توسعه است. با این حال، اگر چیزهای اشتباهی را آزمایش کنید – یا حتی بدتر از آن، اصلاً آزمایش نکنید – زمان زیادی را صرف تلاش خواهید کرد تا بفهمید چرا چیزی درست کار نمی کند.