نوشته های پدرام میرشاه

React 19: سریع‌تر، ساده‌تر، قدرتمندتر!

پدرام میرشاه — Tue, 10 Dec 2024 16:29:51 +0330

React همچنان در حال تکامل است و با هر نسخه جدید، نوآوری‌هایی ارائه می‌دهد که توسعه را ساده‌تر و عملکرد را بهبود می‌بخشد. React 19 نیز از این قاعده مستثنی نیست و مجموعه‌ای از ویژگی‌ها را ارائه می‌دهد که تجربه توسعه‌دهندگان را بهینه می‌کند و اپلیکیشن‌ها را کارآمدتر می‌سازد. چه روی پروژه‌های بزرگ کار کنید یا اپلیکیشن‌های کوچک‌تر بسازید، قابلیت‌های جدید در React 19 به شما کمک می‌کند جریان کاری خود را بهبود دهید و مشکلات رایج را برطرف کنید. در این مطلب، برخی از هیجان‌انگیزترین ویژگی‌های جدید React 19 را بررسی می‌کنیم و می‌بینیم که چطور توسعه با React را بهتر از همیشه می‌کند.1. React Compiler (React Forget):چی هست؟React Compiler که به اسم "React Forget" هم شناخته میشه، یه ابزار قدرتمنده که بهطور خودکار بهینه سازیهای مربوط به مموریزیشن (Memoization) رو انجام میده. این یعنی دیگه نیازی به استفاده دستی از useMemo، useCallback یا React.memo نیست.چرا مهمه؟توی پروژههای بزرگ، وقتی تعداد زیادی کامپوننت داری، رندرهای اضافی میتونن هم عملکرد اپلیکیشن رو کند کنن و هم کد رو پیچیدهتر کنن. این کامپایلر دقیقاً این مشکل رو حل میکنه و تمرکز برنامه نویس رو روی کد اصلی نگه میداره.چطور کار میکنه؟React Forget کدی که نوشتی رو آنالیز میکنه و تشخیص میده کد کجا باید مموریزه بشه. بهصورت داخلی، این ابزار از متدهای بهینه سازی استفاده میکنه که کاملاً سازگار با معماری React هست.مثال :بدون React Forget:javascriptCopy codefunction TodoList({ todos, addTodo }) { const handleAddTodo = useCallback(() => { addTodo('New Todo'); }, [addTodo]); return (

{todo.text}

); }با React Forget:javascriptCopy codefunction TodoList({ todos, addTodo }) { return (

{todo.text}

); }هیچ بهینهسازیای از دست نمیره، ولی کد تمیزتر و سادهتر شده.2. وب کامپوننتها و المانهای سفارشی (Web Components and Custom Elements):چی هست؟وب کامپوننتها مثل آجرهایی هستن که میتونی باهاش یه اپلیکیشن بسازی، حتی اگه با React نوشته نشده باشن. نسخه جدید React این امکان رو میده که راحتتر وب کامپوننتها رو توی کامپوننتهای React استفاده کنی.ویژگیها:پشتیبانی بهتر از ویژگیهای پیشفرض وب مثل className، ref و onClick.هماهنگی بهتر با حالتهای مختلف مثل Shadow DOM.پشتیبانی از Attributes و Properties به صورت بومی.چرا مهمه؟اگه توی یه تیم بزرگ کار میکنی که از تکنولوژیهای مختلف استفاده میکنه (مثلاً بعضیها با React و بعضیها با Vanilla JS یا Web Components کار میکنن)، این ویژگی کار رو برای ادغام کدهای مختلف راحتتر میکنه.مثال :فرض کن یه وب کامپوننت برای انتخاب تاریخ داری:htmlCopy codeدر React:javascriptCopy codefunction App() { const ref = useRef(null); useEffect(() => { ref.current.addEventListener('change', (event) => { console.log(event.detail.selectedDate); // گرفتن تاریخ انتخاب شده }); }, []); return ; }تو میتونی بهراحتی از ویژگیهای وب کامپوننتت توی React استفاده کنی.3. هوک های پیشرفته تر (Enhanced Hooks):چی هست؟هوکهای React همیشه برای مدیریت استیت و رفتارها استفاده میشدن. حالا با بهبود هوکهای موجود و اضافه شدن هوکهای جدید، میتونی خیلی راحتتر مشکلات متداول رو حل کنی.ویژگیهای جدید:بهبود در useMemo و useCallback: عملکرد بهینه تر و کاهش سربار حافظه.هوک جدید useResource: مدیریت Async Resources مثل Fetch کردن دیتا.هوکهای مرتبط با فرم: useFormState و useFormStatus.چرا مهمه؟کار با فرمها و منابع Async همیشه سخت بوده. با این تغییرات، این مشکلات حل میشن.مثال عمیقتر (مدیریت فرمها):قبلاً باید برای مدیریت استیت فرم از useState یا کتابخونه هایی مثل formik استفاده میکردی. حالا با useFormState و useFormStatus این کار سادهتره:javascriptCopy codefunction MyForm() { const { formState, setFormState } = useFormState(); const { isSubmitting, errors } = useFormStatus(); const handleSubmit = () => { setFormState({ ...formState, isSubmitting: true }); // ارسال فرم... }; return (

setFormState({ ...formState, email: e.target.value })} /> {errors.email && {errors.email}}

۷ کتاب خونه برتر State Management در React

پدرام میرشاه — Sun, 01 Dec 2024 19:40:02 +0330

مدیریت State Management تو React یکی از چالش‌های جذاب (و گاها اعصاب‌خردکن!) برای توسعه‌دهنده‌هاست. این موضوع فقط برای کاربرا مهم نیست؛ خود دولوپرها هم دنبال یه راه‌حل ساده و کاربردی هستن تا بتونن تجربه‌های کاربری جذاب و پیچیده رو پیاده کنن.خب، دولوپرها از React hooks استفاده می‌کنن تا به State کامپوننت‌ها دسترسی داشته باشن و اونا رو بین بخش‌های مختلف به اشتراک بذارن. ولی وقتی تعداد کامپوننت‌ها زیاد می‌شه، دیگه این روش جواب نمی‌ده و کار رو سخت می‌کنه. اینجاست که کتابخونه‌های State Management وارد صحنه می‌شن و قضیه رو نجات میدن.حالا سؤال اینه که کدوم کتابخونه رو انتخاب کنیم؟ خب، بستگی به نیازای شما داره. بیاید نگاهی بندازیم به چندتا از معروف‌ترین کتابخونه‌ها و ببینیم چجوری می‌تونید تصمیم بگیرید.حالا State Management تو React یعنی چی؟این State تو React در واقع حافظه کامپوننت شماست، یه جورایی مثل اون دفترچه‌ای که همیشه تو جیبتونه! این همون جاییه که اطلاعات متغیر و وابسته به تعامل کاربر رو ذخیره می‌کنید.State Management یعنی اینکه این دفترچه رو بین بخش‌های مختلف اپلیکیشن به اشتراک بذارید، بدون اینکه توش خط‌خطی بشه یا صفحه‌هاش کنده بشه. هر تغییری که کاربر ایجاد کنه، ممکنه بخش‌های مختلفی از اپلیکیشن رو تحت تأثیر قرار بده. بنابراین، اگه این فرآیند رو درست مدیریت نکنید، کاربر احتمالا یه UI درب و داغون می‌بینه.چرا State Management این‌قدر مهمه؟حالا چرا این موضوع اهمیت داره؟ چون بدون یه مدیریت درست، اپلیکیشن React شما زود به هم می‌ریزه و تجربه کاربری به شدت آسیب می‌بینه.فرض کنید یه اپلیکیشن فروشگاه آنلاین دارید. وقتی یه کاربر یه محصول می‌خره، کلی اتفاق می‌افته:محصول میره تو سبد خرید.تو تاریخچه خرید مشتری ثبت میشه.تعداد محصولات موجود آپدیت میشه.حالا اگه این تغییرات به درستی مدیریت نشن، کل فروشگاه ممکنه قاطی کنه! با یه State Management درست، می‌تونید این پروسه‌ها رو ساده‌تر، مقیاس‌پذیرتر و قابل پیش‌بینی کنید.کتابخونه‌های State Management تو Reactکتابخونه‌های State Management مثل یه جعبه ابزار برای دولوپرها هستن. اینا میان کلی کار رو راحت‌تر می‌کنن و یه سری اصول و استانداردهای خوب رو برای مدیریت State ارائه میدن.هر کتابخونه یه سبک و روش خاص برای حل مسئله داره. این تفاوت‌ها تو چیزایی مثل اندازه، پشتیبانی از زبان‌ها، مستندات و قابلیت‌های API دیده میشه. انتخاب بهترین ابزار به نیازای پروژه، مهارت تیم و بزرگی کار بستگی داره.۷ کتابخونه برتر State Management تو Reactاز بین کلی کتابخونه که تو GitHub موجوده، یه سری از اونا به خاطر ویژگی‌های خاصشون بیشتر مورد توجه قرار گرفتن.چی باید در انتخاب کتابخونه در نظر بگیریم؟راحتی استفادهعملکردمقیاس‌پذیریانعطاف‌پذیرینگهداری راحتقابلیت استفاده مجددتست‌پذیریاکوسیستم و جامعه کاربریخب، بریم سراغ ۷ مورد از بهترین گزینه‌ها:۱. ReduxRedux یکی از قدیمی‌ترین و پرکاربردترین کتابخانه‌های State Management برای React است که از سال ۲۰۱۵ مورد استفاده قرار می‌گیرد. ایده اصلی Redux این است که همه State‌های برنامه در یک Store مرکزی ذخیره شوند. این طراحی به توسعه‌دهندگان اجازه می‌دهد تا تغییرات State را بهتر کنترل و پیگیری کنند.Redux از مفاهیمی مثل Actions و Reducers برای مدیریت تغییرات استفاده می‌کند:Actions، اشیایی هستند که مشخص می‌کنند چه اتفاقی باید بیفتد.Reducers، توابعی هستند که به Store می‌گویند چطور باید State را بر اساس Action تغییر دهد.هرچند Redux بسیار محبوب است، اما یکی از انتقادات اصلی نسبت به آن، کدنویسی بیش از حد (یا همان Boilerplate) است که ممکن است در پروژه‌های بزرگ باعث خستگی توسعه‌دهندگان شود. خوشبختانه، ابزار Redux Toolkit طراحی شده تا این مشکل را برطرف کند. این ابزار فرآیند استفاده از Redux را ساده‌تر کرده و کارایی آن را افزایش می‌دهد.از دیگر ویژگی‌های مثبت Redux می‌توان به پایداری، جامعه کاربری بزرگ، و اکوسیستم غنی آن اشاره کرد. همچنین Redux یک راه‌حل مستقل از فریم‌ورک است، به این معنی که می‌توانید آن را در پروژه‌های غیر React نیز به کار ببرید.۲. HookstateHookstate یکی از جدیدترین کتابخانه‌های State Management است که به‌عنوان جایگزینی مدرن برای React hooks و Redux طراحی شده است. این کتابخانه به دلیل کارایی بالا، سادگی استفاده، و قابلیت مقیاس‌پذیری شناخته می‌شود.Hookstate مبتنی بر React hooks بومی است و برخلاف Redux، نیاز به Actions و Reducers ندارد، که باعث کاهش پیچیدگی کدنویسی می‌شود. این کتابخانه ویژگی‌های منحصر‌به‌فردی مثل Nested State (برای مدیریت Stateهای چندسطحی) و Scoped State (برای ایزوله کردن State‌های خاص) را ارائه می‌دهد.از دیگر ویژگی‌های جالب Hookstate، پشتیبانی از TypeScript و افزونه‌هایی است که می‌توانند تجربه توسعه‌دهنده را بهبود ببخشند.هرچند Hookstate نسبت به Redux و MobX جدیدتر است و هنوز جامعه کاربری کوچکتری دارد، اما به دلیل نوآوری و کارایی بالایش، به‌سرعت در حال محبوب شدن است.۳. RecoilRecoil یک کتابخانه State Management است که توسط تیم فیسبوک توسعه داده شده و برای اولین بار در سال ۲۰۲۰ معرفی شد. Recoil از مفاهیمی مثل Atoms و Selectors برای مدیریت State استفاده می‌کند:Atoms، کوچک‌ترین واحدهای قابل اشتراک از State هستند. هر Atom می‌تواند بین کامپوننت‌های مختلف به اشتراک گذاشته شود.Selectors، توابع خالصی هستند که می‌توانند داده‌ها را از Atoms بخوانند یا بر اساس آنها داده جدیدی تولید کنند.یکی از نقاط قوت Recoil، رندر مجدد بهینه کامپوننت‌هاست. این کتابخانه فقط کامپوننت‌هایی را رندر می‌کند که State مرتبط با آنها تغییر کرده باشد. این ویژگی باعث افزایش کارایی و مقیاس‌پذیری می‌شود.اگرچه Recoil هنوز به‌عنوان یک کتابخانه "تجربی" شناخته می‌شود و به اندازه Redux یا MobX بالغ نیست، اما به دلیل طراحی منحصربه‌فرد و ادغام با React Suspense، به یک گزینه جذاب برای پروژه‌های جدید تبدیل شده است.۴. JotaiJotai که در سال ۲۰۲۱ معرفی شد، یک کتابخانه جمع‌وجور و کارآمد برای مدیریت State است. این کتابخانه از مدل Atomic State Management بهره می‌برد و تلاش می‌کند فرآیند مدیریت State را تا حد ممکن ساده و قابل فهم کند.یکی از ویژگی‌های جالب Jotai، کوچک بودن آن است. این کتابخانه با API ساده و تمیز، به توسعه‌دهندگان اجازه می‌دهد تا بدون نیاز به تعریف Actions یا Reducers، مستقیماً با State کار کنند.Jotai همچنین از TypeScript پشتیبانی می‌کند و با ابزارهای دیگری مثل React Suspense سازگار است. در کنار این‌ها، سیستم جمع‌آوری زباله (Garbage Collection) داخلی Jotai به مدیریت حافظه کمک می‌کند و کارایی آن را افزایش می‌دهد.این کتابخانه برای پروژه‌هایی که نیاز به یک راه‌حل سبک و سریع دارند، انتخابی عالی است.۵. Rematchاگر به دنبال یک نسخه ساده‌تر و سریع‌تر از Redux هستید، Rematch می‌تواند گزینه‌ای مناسب باشد. این کتابخانه به گونه‌ای طراحی شده که استفاده از Redux را برای توسعه‌دهندگان راحت‌تر کند.Rematch با حذف نیاز به تعریف جداگانه Actions، Reducers و Effects، حجم کدنویسی را کاهش می‌دهد. همه این‌ها در قالب مدل‌هایی تعریف می‌شوند که شامل State و توابع مرتبط هستند.Rematch مستقل از فریم‌ورک است و می‌توانید آن را با فریم‌ورک‌های دیگری مثل Vue و Angular نیز استفاده کنید. علاوه بر این، این کتابخانه از TypeScript پشتیبانی می‌کند و با وجود حجم کم (تنها ۱.۷KB)، امکانات گسترده‌ای ارائه می‌دهد.۶. ZustandZustand یک کتابخانه کوچک و فوق سریع است که توسط تیم Jotai توسعه داده شده است. این کتابخانه با حجم کمتر از ۱KB، یکی از سبک‌ترین گزینه‌ها برای State Management محسوب می‌شود.Zustand مبتنی بر hooks است و با ارائه API ساده و کاربردی، کار توسعه‌دهندگان را بسیار راحت می‌کند. یکی از ویژگی‌های جذاب این کتابخانه، مدیریت مؤثر Stateهای گذرا (Transient States) است که بدون رندر مجدد کامپوننت‌ها انجام می‌شود.Zustand همچنین مشکلات رایجی مثل Zombie Child Problem و Context Loss در React را برطرف کرده و به همین دلیل، یکی از محبوب‌ترین انتخاب‌ها در میان کتابخانه‌های جدید است.۷. MobXMobX یکی از محبوب‌ترین کتابخانه‌های State Management است که رویکردی متفاوت نسبت به Redux دارد. این کتابخانه از پارادایم Object-Oriented Programming (OOP) و الگوی Observer/Observable برای مدیریت State استفاده می‌کند.در MobX، داده‌ها به صورت Observable تعریف می‌شوند و کامپوننت‌ها به‌عنوان Observers به این داده‌ها متصل می‌شوند. هر تغییری در Observableها به صورت خودکار در کامپوننت‌های وابسته منعکس می‌شود.یکی از ویژگی‌های جالب MobX، امکان تغییر مستقیم State است، بدون نیاز به توابع پیچیده. این باعث می‌شود کدنویسی کوتاه‌تر و ساده‌تر شود. هرچند، این رویکرد ممکن است برای برخی توسعه‌دهندگان که کنترل بیشتری روی تغییرات نیاز دارند، مناسب نباشد.MobX به دلیل جامعه کاربری گسترده، مستندات قوی و انعطاف‌پذیری بالا، همچنان یکی از گزینه‌های اصلی برای پروژه‌های پیچیده است.چطور بهترین کتابخونه رو انتخاب کنیم؟واقعیت اینه که هر پروژه داستان خودش رو داره. Redux و MobX گزینه‌های مطمئنی هستن، ولی اگه دنبال روش‌های جدید و هیجان‌انگیز هستید، Jotai و Hookstate می‌تونن براتون جذاب باشن.انتخاب شما باید بر اساس نیازای پروژه و توانایی تیم توسعه باشه. اگه هنوزم مطمئن نیستید، نگران نباشید! همیشه میشه راه‌های مختلف رو امتحان کرد.حرف آخرکتابخونه های State Management یه چالش همیشگی تو React هستش، ولی با انتخاب ابزار مناسب و داشتن یه تیم خوب، می‌تونید از پسش بربیاید.

تست نویسی Frontend

پدرام میرشاه — Wed, 21 Jun 2023 09:57:55 +0330

تازگی ها بخاطر یه پروژه ای درگیر تست نویسی شدم و صرفاً برای دونستن و آشنایی خودم رفتم یکم با انواع تست نویسی برای فرانت اند آشنا بشم. اینجا به طور خلاصه اطلاعاتی که به دست آوردم رو باهاتون به اشتراک میذارم باشد که رستگار شویم??. فقط اینم بگم اگه بخواید مثال هارو متوجه بشید یه دانش پایه از jsو es6 و react داشته باشید بهتره. تو مثالا برای تست نویسی من از jest استفاده کردم که فک نمیکینم خیلی پیچیده باشه و نیاز به دانش قبلی داشته باشه. در کل این بیشتر یه توضیح مفهومیه و نه آموزش پس نبود این دانش ها هم مشکلی ایجاد نمیکنه.تست نویسی فرانت اند چیست؟ ?بخوام به شکل خیلی ساده بگم داستان اینه که شما با تست نویسی تو فرانت اند متوجه میشید که آیا همه عناصر سایتتون همونجوری که توقع دارید کار میکنن یا نه، مثلاً اگه فلان جا کیلیک بشه اون فانکشنالیتی که توقع دارید اجرا میشه یا نه ، سرعت لود شدن صفحه استاندارد هست یا نه ،اگه فیلد های یه فرم پر شد و ارسال شد اطلاعاتش هم همونجوری که توقع دارید ارسال میشه یا نه. خلاصه اینکه تست نویسی انجام میشه که شما بفهمید همه عملکرد هایی که از این لایه از پروژه توقع دارید بدون اشکال اجرا میشه یا نه ??انواع تست فرانت اندتست نویسی فرانت اند به شکل های مختلفی انجام میشه که اینجا سه تاشون(که حداقل حس میکنم ) کاربردی ترن رو براتون توضیح میدم:1-Unit testفرض کنید بخواید عملکرد کوچیک ترین بخش از کدتون که برای مثال یه فانکشن ساده است رو تست کنیدبرای مثال متد زیرfunction add(x, y) { return x + y }خب اینجاست که کار یونیت تست شروع میشه??راستی همونجوری که برای پیاده سازی بهتر و سریع تر ui سایت از framework هاو کتابخونه هایی مثل vue و react استفاده میکنیم ، تست نویسی هم ابزار و فریم ورک های خودشو داره و یکی از رایج ترین فریم ورک های تست نویسی jest هست که اینجا برای تونیت تست از اون استفاده میکنیم// 1. The method we want to test function add(x, y) { return x + y } // 2. A test suite describe("add method", () => { // 3. A unit test it("should return 2", () => { // 4. An assertion expect(add(1, 1)).toBe(2) }) })حالا بذارید توضیح بدم چه اتفاقی داره میوفته1 - خب تو این مرحله متدی که میخوایم تست کنیم نوشته شده و واضحه چیه ، در واقع یه متد ساده داریم که دوتا ورودی رو میگیره و بعد جمع زدنشون اونا رو برمیگردونه2- تو این مرحله برای تستمون یه بدنه تعریف میکینم به اسم add method و در واقع هر چندتا تست بخوایم تو این مرحله اجرا بشه رو توی این بدنه قرار میدیم 3- توی این مرحله در واقع یه یونیت تست ساختیم که تست رو به صورت کال بک ازمون میگیره4- مرحله آخر و مهم ترین قسمت یونیت تست اینجاست که ما میگیم ما از یه متدی به اسم add که قبلاً تعریفش کردیم یه توقعی داریم که اگه جفت ورودی هارو بهش 1 بدیم اون به ما 2 برگردونه ( بالاتر تعریف کردیم که کار این متد همینه که ورودی هارو جمع کنه و نتیجه رو بهمون برگردونه)حالا بعد ران کردن تست این قطعه کد بررسی میشه و اگه نتیجه مطلوبو برگردونه تست متد درسته و مشکلی نداره ولی اگه اشتباه باشه باید بریم کدمونو بررسی کنیم که ببینم کجا ایراد وجود داره و تمام همین شکلی یه یونیت تست ساده که یه تیکه خیلی کوچولو از کدمونو قراره تست کنه رو نوشیتم??2- Integration Testخب تو یه پروژه بزرگ یه عالمه ماژول و کامپوننت و متد هست که باید بعضی وقتا کنار هم و بعضی وقتا پشت سر هم و... کار کنند تا پروژه بدون اشکال اجرا بشه . برای اینکه ببینیم این یک پارچگی وجود داره از integration test استفاده میکنیم.پس کار اصلی integration test بررسی یکپارچگی عملکرد تو پروژه ماستحالا بذارید یه مثال بزنم ، فرض کنید کاپوننت زیر به اسم Counter.js رو تو پروژه مون داریمimport React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); const handleIncrement = () => { setCount(count + 1); }; return (

Count: {count}

); } export default Counter;خب خیلی چیز پیچیده ای نیست، یه کاپوننتی داریم که توش یه نمایش دهده یک counterوجود داره و یه button که به یه متد متصله و کار این متد اضافه کردن عدد counter هست.پس با هر بار کیلیک کردن روی button متد مربوط بهش کال میشه و به مجموع عدد counter یه عدد اضافه پیدا میکنه. تا اینجا اوکی؟ حله ، حالا میخوایم براش تست بنویسیم.اینجا بازم میخوایم از jest استفاده کنیم . پس یه فایل جدا مثلاً به اسم Counter.test.js میسازیم و کد زیر رو توش مینویسیمimport React from 'react'; import { render, fireEvent } from '@testing-library/react'; import Counter from './Counter'; //step 1 test('clicking the increment button updates the count', () => { //step 2 const { getByText } = render(); const countElement = getByText('Count: 0'); const incrementButton = getByText('Increment'); //step 3 // Click the button twice fireEvent.click(incrementButton); fireEvent.click(incrementButton); //step 4 // Check that the count has been updated expect(countElement).toHaveTextContent('Count: 2'); });خب بریم سراغ توضیح این مثال1- تو این مرحله میایم یه بدنه برای تست میسازیم به اسم clicking the increment button updates the count .2- تو مرحله دوم اطلاعات مورد نیازمون از کامپونتت که برای تست احتیاج داریم میگیرم ، مثل نمایشگر counter و button افزایش دهنده عدد نمایشگر.3- تو این مرحله برای انجام تست میایم یه کار انجام میدیم که عدد نمایشگر تغییر کنه و درواقع دوبار روی باتن کلیک میکنیم که طبیعتاً به شرط درست بودن عملکرد کامپونتمون باید عدد نمایشگر دوتا اضافه بشه که با فرض 0 بودن باید برابر 2 بشه.4- خب اینجا تست اصلیمونه که بهش چی میگیم؟ میگیم داداش شما بیا countElement که بالاتر گرفتی رو دوباره بررسی کن ببین اون متن داخلش تبدیل شده به 'Count: 2' یا نه.به همین سادگی یه integration test نوشتیم??3- End To End Test (e2e)اینجا یکم داستان فرق داره چه فرقی؟ اینکه ما تو e2e میخوایم ببینیم فلان عملکرد و یا فرآیندی که داریم از دید کاربر چجوریهفرض کنید میخوایم ببینیم فرآیند login یه سایت درست کار میکنه یا نه .این بار خیلی از نظر فنی کد بررسی نمیشه بیشتر از این لحاظ بررسی میشه که اول تا آخر یه فرآیند از چشم یه کاربر به شکل کامل و بدون اشکال انجام میشه یا نه.خب فرض کنید کامپوننت Login.js رو برای فرایند login داریم:import React, { useState } from 'react'; const Login = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [loggedIn, setLoggedIn] = useState(false); const handleEmailChange = (e) => { setEmail(e.target.value); }; const handlePasswordChange = (e) => { setPassword(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); // Simulate login process // Replace this with your actual login logic if (email === 'example@example.com' && password === 'password123') { setLoggedIn(true); } }; return (

{loggedIn &&

Logged in

}

); }; export default Login;خب اینجا یه کامپوننت ساده داریم که توش گفتیم ببین آقا فرض کن تو دوتا فیلد password و email داری که اگه این دوتا فیلد پر بود و دکمه submit کلیک شد بیا بگو login شدیم و logged in رو نمایش بده در غیر این صورت login اتفاق نیافتاده. پس تو تستمون هم همینو میخوایم بررسی کنیم . یعنی اول باید دوتا فیلد از فرم رو پر کنیم بعد روی submit کلیک کنیم و بعد چک کنیم ببینیم آیا login انجام شده یا نه.خب بیاید بریم سراغ تستش، اینجا فایل Login.test.js رو داریم:import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import Login from './Login'; //step1 describe('Login Component', () => { test('should log in successfully', () => { render(); //step2 // Find the login form elements const emailInput = screen.getByLabelText('Email:'); const passwordInput = screen.getByLabelText('Password:'); const submitButton = screen.getByRole('button', { name: 'Submit' }); //step3 // Type email and password fireEvent.change(emailInput, { target: { value: 'example@example.com' } }); fireEvent.change(passwordInput, { target: { value: 'password123' } }); //step 4 // Submit the login form fireEvent.click(submitButton); //step // Assert that the user is logged in expect(screen.getByText('Logged in')).toBeInTheDocument(); }); }); 1- میایم بدنه تستمون تعریف میکنیم و یه تست میسازیمو و کاپونتمونو رندر میکنیم2- فیلد های password و email و submit رو از روی صفحه پیدا میکنیم.3- فیلد های passwordو email رو با دیتای مورد نظرمون پر میکنیم 4- روی submit کلیک میکنیم5- نتیجه رو بررسی میکینم. اینجا چک میکنیم ببینیم اون متن logged in که قرار بود تایید کننده‌ی لاگین ما بوده تو صفحه وجود داره یا نه و تمام و اینجوری یه تست e2e برای پروژه مون نوشتیم??جمع بندی: من تو این پست بیشتر قصد داشتم یه نگاه مفهومی درباره تست نویسی تو فرانت اند صرفاً بر اساس تحقیق و مطالعه ای که این چند وقت داشتم باشه ، اگه کم و کسر و ایرادی هم داشت هم امیدوارم بعد تر اصلاحش کنم هم اینکه شما به بزرگی خودتون ببخشید. امیدوارم این توضیح هات کمکتون کرده باشه و به کارتون اومده باشه و این که تا اینجا خوندید دمتون خیلی گرمه و خدافظ???