تست برنامه های Next.js بوسیله Jest و Cypress

یاد بگیرید که یک برنامه React بدون سرور در دنیای واقعی را با مسیرها ، احراز هویت ، پایگاه داده و موارد دیگر آزمایش کنید!

عنوان اصلی : Testing Next.js Apps with Jest, Testing Library and Cypress

سرفصل های دوره :

مقدمه:
ویژگی های دوره: آزمون های کد و یادداشت های جانبی
راهنمای بقیه دوره
تعریف و فلسفه آزمون :
مقدمه ای بر تست
انواع تست
چه چیزی را تست کنیم
افزونگی تست
دستورالعمل های دانه بندی تست
نمایش من در تست های اسنپ شات (نکته: چیز من نیست)
خلاصه: تعاریف آزمون و فلسفه
شرایط و دستورالعمل های تست
برنامه دوره و استراتژی‌های واکشی داده Next.js:
مقدمه ای بر Course App و Next.js Data Fetching
برنامه نمایشی دوره
راهبردهای واکشی داده Next.js
راهبردهای واکشی داده Next.js
نصب برنامه دوره
یادداشت‌های کد برنامه دوره
تست UI :
مقدمه و فناوری ها
تست یک صفحه استاتیک
نکته جانبی: چرا به آزمون موجود اضافه شود؟ چرا یک تست جدید ایجاد نمی کنید؟
آزمایش لوازم SSG
نکته جانبی: درباره داده های جعلی برای "محل کنسرت محبوب"
آزمون کد! خطای جزء باند
تصمیمات و رهنمودهای آزمون ها تاکنون
معرفی Mock Service Worker
راه اندازی MSW با Next.js
افزودن یک MSW Handler
نکته جانبی: عیب یابی MSW Handlers
استفاده از MSW برای آزمایش: مؤلفه رزرو
آزمون کد! رزروهای کاربر
پاسخ های MSW مختلف در هر آزمون
آزمون کد! پاسخ های مختلف MSW در هر آزمون
خلاصه: تست UI
تنظیم پایگاه داده آزمایشی:
یادداشت های مهم برای کاربران ویندوز
مقدمه ای بر پایگاه های داده تست
ایجاد پایگاه داده تست
متغیرهای محیطی
ایجاد DB تست و متغیرهای محیطی
نکته جانبی: نمونه DB را با سرور ابری آزمایش کنید
یک روش برای بازنشانی DB آزمایشی ایجاد کنید
خلاصه: راه اندازی یک پایگاه داده آزمایشی
مفاهیم پایگاه داده آزمون
تست مسیرهای Next.js (با استفاده از Cypress):
معرفی تست Next.js Routes and Cypress
اختیاری: مقدمه ای بر سرو
راه اندازی Next.js برای Cypress
نکته جانبی: اجرای آزمایش‌های یکپارچه‌سازی پیوسته در برابر استقرار پیش‌نمایش
راه اندازی Cypress
نکته جانبی: دویدن سرو بدون تعیین مسیر
اولین تست سرو: مسیر ایستا
آزمون کد! مسیر ثابت
تست مسیرهای پویا
بازنشانی پایگاه داده در Cypress
نکته جانبی: چرا در ابتدای آزمون بازنشانی می شود و نه در پایان؟
مسیر پویا را آزمایش کنید که در زمان ساخت وجود داشت
آزمون کد! مسیر آزمایشی که وجود ندارد
مسیر آزمایشی بعد از ساخت ایجاد شد
همه تست های Cypress و Jest را اجرا کنید
خلاصه: تست مسیرهای Next.js و Cypress
آزمایش ISR و به‌روزرسانی‌های داده:
مقدمه ای بر تست ISR و به روز رسانی داده ها
داده های تست از کش ISR می آید
اولین تست کش ISR
نکته جانبی: اسکریپت های Next.js
آزمون کد! صفحه باندهای ISR
به روز رسانی کش ISR در صورت تقاضا
نوشتن یک افزونه Cypress برای متغیر محیطی
تست اعتبار سنجی مجدد ISR
پاک کردن کش ISR
افزودن ISR Cache Clearing به تست
آزمون کد! اعتبار کش ISR را مجدداً تأیید کنید
SWR اعتبار مجدد در بازه زمانی
تست اعتبار مجدد در بازه زمانی
آزمون کد! اعتبار مجدد در فاصله زمانی
خلاصه: آزمایش ISR و به‌روزرسانی‌های داده
تست احراز هویت:
مقدمه ای بر تست احراز هویت
Auth Wrapper در برنامه دوره
افزودن جزئیات ورود به Cypress
تست جریان موفقیت آمیز با Auth Wrapper
نکته جانبی: چرا این آزمایش اینقدر طولانی است؟
آزمون کد! عدم موفقیت در احراز هویت و به دنبال آن موفقیت آمیز
پارامترسازی تست های صفحه محافظت شده
احراز هویت برنامه‌ای
نکته جانبی: منابعی برای احراز هویت برنامه‌ای
آزمون کد! احراز هویت از طریق برنامه
تست پایان به پایان خرید بلیط
نکته جانبی: SWR نمی تواند متن به روز شده را پیدا کند (فاصله حذف فریب)
خلاصه: تست احراز هویت
آزمایش API های Next.js:
مقدمه ای بر تست های API
اولین تست API
رفع خطاهای تست: Polyfill، resetDB، نادیده گرفتن دایرکتوری DB در فهرست پیگیری
تست یک مسیر با پارامتر URL
تست یک مسیر POST
Mocking Utils Module for Authentication
نکته جانبی: نحو "صادرات" برای ماژول TypeScript مسخره شده در Jest
نوشتن تست با استفاده از Mocked Module
آزمون کد! کاربر بدون رزرو
آزمون کد! یک رزرو ارسال کنید
رفع مشکلات مربوط به تست های موازی با استفاده از پایگاه داده مشترک
نکته جانبی: مثالی از استفاده از چندین فایل jest.config.js
به‌روزرسانی مقدار بازگشتی تابع ساختگی: آزمایش درخواست غیرمجاز
آزمون کد! به‌روزرسانی مقدار بازگشتی تابع ساختگی
تست مسیرها با پارامترهای رشته کوئری
آزمون کد! پارامترهای رشته پرس و جو
خلاصه: تست کردن API های Next.js
تبریک و متشکرم!
آموزش بیشتر:
سخنرانی پاداش