در این راهنما، نحوه راه اندازی React Testing Library را در Next.js خواهید آموخت. ما همچنین در مورد اینکه چرا باید همیشه برنامه های React خود را آزمایش کنید صحبت خواهیم کرد.

در مورد ویژگی ها و مزایای استفاده از کتابخانه تست React برای آزمایش برنامه های React و نحوه پیکربندی آن با Next.js صحبت خواهم کرد. برای پایان دادن به این آموزش، من به شما نشان خواهم داد که چگونه برد بازی 2048 خود را آزمایش کردم.

برای درک این راهنما، به هیچ دانش عمیقی نیاز ندارید، اما اگر اصول React را بدانید، یادگیری آن آسان تر خواهد بود. هدف نهایی این است که آزمایش‌هایی را برای برنامه‌های Next.js خود راه‌اندازی کنید، پس درک React باعث می‌شود که آزمایش را آرام شروع کنید.

بیا شروع کنیم!

چرا تست اهمیت دارد؟

برای تبدیل شدن به یک توسعه‌دهنده React، و افزایش تغییرات خود در یافتن شغل، به چند دلیل باید در مورد تست کردن بیاموزید:

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

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

توسعه‌دهندگان با مهارت‌های تست مناسب همیشه مورد تقاضا هستند زیرا می‌دانند چگونه برنامه‌های کاربردی با کیفیتی را طراحی و بسازند که می‌توانند برای سال‌ها نگهداری شوند.

React Testing Library چیست؟

React Testing Library گروهی از ابزارهای آزمایشی است که به شما کمک می کند از صحت پروژه های React و Next.js خود اطمینان حاصل کنید.

فرقی نمی کند که پروژه شما با TypeScript نوشته شده باشد و از React یا Next.js استفاده می کند - همیشه می توانید از کتابخانه تست React برای آزمایش برنامه خود استفاده کنید. استفاده از آن آسان است و مقدار کدی را که برای آماده سازی موارد تست نیاز دارید، کاهش می دهد.

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

بهترین بخش این است که React Testing Library به تست های واحد محدود نمی شود. می توانید از آن برای آماده سازی تست های ادغام، انتها به انتها (تست های E2E) و بسیاری موارد دیگر استفاده کنید. به همین دلیل ابزار قدرتمندی است.

چگونه کتابخانه React Testing را با Next.js راه اندازی کنیم

استفاده از React Testing Library با Next.js یک فرآیند بسیار ساده است. شما فقط به چهار چیز نیاز دارید:

یک پروژه Next.js موجود

کتابخانه تست Jest و React با npm نصب شده است

Jest در پروژه Next.js شما پیکربندی شده است

برای نوشتن اولین آزمون

ساده به نظر می رسد، اینطور نیست؟

سریعترین راه برای ایجاد یک برنامه Next.js جدید با تایپ npx create-next-app@latest در خط فرمان است. شما باید به چند سوال پاسخ دهید و برنامه به طور خودکار برای شما ایجاد می شود.

اگر پروژه Next.js موجود دارید، فقط باید مجموعه آزمایشی را با استفاده از npm نصب کنید:

 npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

در این راهنما، ما از مجموعه تست Jest برای اجرای آزمایش‌ها استفاده خواهیم کرد که یک ابزار نسبتاً رایج ساخته شده توسط فیس بوک است. اگر می‌خواهید جست را با چیز دیگری جایگزین کنید، می‌توانید به راحتی از Vitest، Playwright یا Cypress استفاده کنید - برای جزئیات بیشتر، فقط اسناد Next.js را تحلیل کنید.

برای پیکربندی Jest در Next.js، باید یک فایل jest.config.js را در ریشه پروژه خود ایجاد کنید و محتوای زیر را در آن قرار دهید ( این یک boilerplate است ):

 // file: jest.config.js const nextJest = require("next/jest"); const createJestConfig = nextJest({ dir: "./", }); const customJestConfig = { setupFilesAfterEnv: ["<rootDir>/jest.setup.js"], // <= setup file here testEnvironment: "jest-environment-jsdom", }; module.exports = createJestConfig(customJestConfig);

همانطور که می بینید، فایل کانفیگ ما را ملزم می کند که یک فایل دیگر ایجاد کنیم تا تست های ما کار کند. این فایل راه‌اندازی قبل از هر آزمایش گنجانده می‌شود و ما از آن برای وارد کردن React Testing Libary در هر آزمایش استفاده می‌کنیم، پس نیازی به انجام دستی آن نیست.

حالا بیایید فایل راه اندازی را ایجاد کنیم. باید jest.setup.js نامیده شود و دارای خط زیر باشد:

 // file: jest.setup.js import "@testing-library/jest-dom";

پیکربندی مجموعه آزمایشی شما تقریباً کامل شده است.

نحوه ایجاد دستور npm test

برای تکمیل پیکربندی مجموعه آزمایشی خود، باید یک دستور npm test ایجاد کنیم و آن را با Jest and React Testing Library پیوند دهیم. ما این کار را در package.json با گفت ن یک دستور test به بخش scripts انجام خواهیم داد:

 { "name": "2048-in-react", "version": "0.2.0", "homepage": "https://mateuszsokola.github.io/2048-in-react/", ..., "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "test": "jest --watch" // <== HERE }, ... }

اکنون هر زمان که دستور npm test را اجرا کنید، مجموعه آزمایشی را اجرا خواهید کرد:

مجموعه تست کار می کند، اما تست ها هنوز وجود ندارند. این منطقی است زیرا ما هنوز هیچ آزمایشی ایجاد نکرده ایم.

چگونه کامپوننت ها را با استفاده از کتابخانه تست React تست کنیم

قبل از نوشتن اولین تست خود، بیایید یک دایرکتوری ایجاد کنیم که در آن آنها را ذخیره کنیم. به طور پیش فرض، تست ها در فهرستی به نام __tests__ ذخیره می شوند. این نام عجیب به نظر می رسد، اما دلیل خوبی برای داشتن دو خط پیش و پسوند دارد. به لطف این موارد، دایرکتوری آزمایشی شما همیشه در بالای درخت پروژه شما خواهد بود.

اکنون ما آماده ایم تا اولین تست شما را ایجاد کنیم.

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

اگر بازی 2048 را نمی شناسید فقط می گویم که روی تخته 4*4 بازی می شود. این بدان معناست که تخته بازی باید 16 سلول (4 x 4 = 16) داشته باشد.

حالا بیایید یک فایل جدید به نام board.test.jsx در دایرکتوری تست __tests__ ایجاد کنیم:

 // __tests__/compontents/board.test.jsx import { render } from "@testing-library/react"; import Board from "@/components/board"; describe("Board", () => { it("should render board with 16 cells", () => { const { container } = render( <Board /> ); const cellElements = container.querySelectorAll(".cell"); expect(cellElements.length).toEqual(16); }); });

همانطور که می بینید، این تست برد را رندر می کند و تحلیل می کند که 16 عنصر DOM وجود دارد که یک کلاس cell دارند. چیزی بیشتر از این نیست. اگر تعداد سلول ها متفاوت باشد، این آزمایش ناموفق خواهد بود.

بیایید نگاهی کوتاه به ترمینال بیندازیم. همه چیز سبز است و این بدان معنی است که تست ما به درستی اجرا شده است و آن را با موفقیت پشت سر گذاشته است:

بعد چه می شود؟

تبریک می گویم! اکنون می دانید که چگونه یکی از محبوب ترین کتابخانه های تست را برای React راه اندازی کنید. فکر می‌کنم به شما کمک می‌کند تا برنامه Next.js خود را از نظر کیفیت به سطح جدیدی برسانید.

اگر می‌دانید چگونه برنامه‌های React بسازید، اکنون باید آزمایش را دوچندان کنید زیرا این مهارت به شما کمک می‌کند تا اولین شغل خود را پیدا کنید.

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

اگر سوالی دارید می توانید در توییتر با من تماس بگیرید .

React & Next.js را یاد بگیرید

یادگیری Next.js می تواند ترسناک و اغلب خسته کننده باشد. بیشتر دوره های آنلاین به جای ساختن برنامه ها، بر روی ویژگی های React و Next.js متمرکز هستند. به همین دلیل است که من دوره ای ایجاد کردم که به شما کمک می کند تا React و Next.js را یاد بگیرید در حالی که یک بازی باشکوه 2048 را از ابتدا بسازید!

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

می توانید به دوره React و Next.js من در Udemy بپیوندید و بازی 2048 را همراه من بسازید.

این تنها دوره ای است که به آن نیاز دارید.

به دوره React 18 & Next.js کلیک کنید" width="1000" height="350" loading="lazy">
برای ثبت نام کلیک کنید

خبرکاو