توسعه اپلیکیشن های React بصورت TDD - قسمت اول

برنامه نویسی تست محور TDD یا همان Test-driven development یکی از مهم ترین بخش های پیاده سازی پروژه های نرم افزاری هستش. متاسفانه تو کشور ما خیلی به این مدل از توسعه نرم افزار و کدنویسی توجه نمیشه ولی اگر اکثر آگهی های استخدام خارجی رو ببینید TDD و تسلط به ابزارهای مربوطه رو برای کدنویسان Front-end و Back-end احتیاج دارن و به این چرخه و نظم خیلی اعتقاد دارن.

نمی خوام خیلی وارد بحث CI/CD و DevOps بشم و یا اینکه در مورد مسایل پیچیده تر صحبت کنم ولی قراره توی این سری مقالات درباره نوشتن تست های ساده برای اپلیکیشن های React صحبت کنم و کمی با فضای تست محور و Unit Testing آشنا بشیم و با شروع TDD در وب اپلیکیشن هامون یک فضای حرفه ای تر و منظم رو ایجاد کنیم و بنظرم خیلی چالش خوبیه ...

توسعه تست محور React
توسعه تست محور React

برنامه نویسی بر پایه TDD چیست ؟

بصورت خلاصه بخوام بگم برنامه نویسی تست محور همانطورکه از اسمش معلومه یعنی بیایم نسبت به تست هایی که از قبل نوشته شده کدی رو بنویسیم که یک قاعده از پیش تعریف شده رو پیروی و بتونه تست های موجود رو pass کنه.

یعنی در برنامه نویسی TDD شما قبل از نوشتن حتی یک خط کد و یا متد و متغیرهای مربوطه تست های ساختاری و مفهومی کد رو می نویسید و بعدا شروع به نوشتن کدهای مربوطه می کنید که نهایت به یک کد منظم و بدون ایراد برسید.

توجه : شاید براتون اول کاری گنگ به نظر برسه , ولی قطعا با مطالعه سری های بعدی مقاله براتون واضح و قابل فهم خواهد بود.

خیلی ها شاید بگن ما به صورت چشمی و انسانی همیشه این تست هارو انجام میدیم , بله - تست نرم افزار کلا بخش و پروسه های مختلفی داره , تست و خطایابی بصورت چشمی و توسط انسان هم یک روش معمول و متداول هستش ولی همه اینها بعد از خروجی تیم کدنویسی یا توسعه و انتشار نسخه بتا و یا development توسط تیم تست نرم افزار صورت میگیره و قبلش باید برنامه نویس کد خودش رو اینجوری تست کنه و از صحت عملکرد مطمئن باشه.

مزیت اصلی TDD چیست ؟

مزایای زیادی هستش و هر کسی یک جور خاص نوشته , ولی یک مثال برای شما بزنم تا با اصلی ترین مزیت این مدل توسعه و برنامه نویسی آشنا بشید:

فکر کنید یک نرم افزار دارید واقعا large scale و غول که کلی برنامه نویس دارن روش کار می کنن و مدام درحال تغییر هستش. حالا مثلا یک موبایل اَپ یا وب اَپ , هیچ فرقی نداره ! فکر کنید اگر یک تغییری بیاد و کد به خطا بخوره با هزار و یک بدبختی میشه این مشکلات رو رفع کرد و یا برنامه نویس یک باگی توی کد جا گذاشته و حالا می خواید رفع اشکال کنید , همه اینها با یک نظم و اصول حرفه ای یعنی TDD قابل جبران هستش و تا زمانیکه تست هایی که نوشتید Passed نشدن کد شما بالا نمیره و این یعنی امنیت بالا در طول کار و خیال راحت. با TDD از deploy شدن نسخه های باگ دار و غلط جلوگیری میشه ....

البته خیلی از تیم های حرفه ای از ابزارهای CI/CD استفاده می کنن که دقیقا روی همین بحث TDD و تست های مربوطه مانور میده که بعدا انشاءالله قسمت شد در موردش خواهم نوشت !!!

توسعه تست محور TDD در React

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

نصب Jest

از بین لایبری و ابزارهای موجود من خودم jest js رو می پسندم و برای تست از این ابزار استفاده می کنم. در نظر داشته باشید که ما داریم ادامه اون سری مقالات پیکربندی webpack برای React رو میریم و قراره تمام کدهایی که اینجا می نویسیم تو structure همون پروژه باشه. پس اگر اون رو نخوندید پیشنهاد می کنم اول مقالات قبلی رو دنبال کنید و بعد اینجا رو ادامه بدید !!!

برای نصب jest دستور زیر رو در root پروژه کنار package.json بنویسید :

 npm install --save-dev jest babel-jest

البته چون داریم از babel هم استفاده می کنیم باید babel-jest رو هم نصب کنیم که داخل پروژه داشته باشیم و بصورت خودکار همه چیز مرتب compile بشن.

توجه: همانطورکه قبلا گفتم داریم ادامه پروژه تنظیمات webpack برای react رو میریم و قاعدتا پکیج های مورد نیاز مثل babel/core و ... نصب شدن !!! اگر به خطا خوردید این قضیه رو در نظر داشته باشید.

در نظر داشته باشید jest چون یک ابزار تست و در فاز توسعه و یا development استفاده میشه باید بصورت dev نصب بشه. حالا برای اینکه دستور test رو داشته باشیم به فایل package.json بر می گردیم و خط زیر رو به بدنه فایل json به زیر خط های دیگه مون داخل scripts اضافه می کنیم :

"scripts": {
       ...
        "test": "jest --watchAll"
},

اینجا اومدیم در script های پروژه دستور test رو مقدار دهی کردیم و مشخص شد که با زدن npm run test باید jest رو اجرا کنه. ولی در نظر داشته باشید یک مقدار watchAll هم بهش دادیم که شبیه به watcher های gulp مقدار watch فعال باشه و اگر هربار تست یا فایل های پروژه رو تغییر دادید خروجی رو ببینید و لازم نباشه مدام دستور npm run test رو تکرار کنید و برای هر بار تغییر یک test جدید run کنید.

ایجاد پوشه __tests__ در ساختار پروژه

طبق روال jest تمامی فایل های تست باید در پوشه ای به نام __tests__ ذخیره بشن. یک پوشه با همین نام در root پروژه کنار src ایجاد کنید و فایل های تست از این به بعد داخل همین ذخیره میشن.

برای شروع یک فایل به نام first.test.js در این پوشه ایجاد کنید و کدهای زیر رو داخلش بنویسید :

test('This is test', () => {
    console.log('Hello World !');
});

بعد دستور npm run test رو اجرا کنید و همچین خروجی رو خواهید دید :

React TDD
React TDD

همانطورکه در تصویر می بینید یک تست رو میگه از مسیر اصلی به نام first اجرا کردم و نتیجه رو به رنگ سبز یعنی PASS کنارش زده و گفته کد شما console.log بوده که نتیجه Hello World هم چاپ شده. در پایین هم یکسری آمار دیگه مثل زمان اجرا کد و تست ها میگه و امکانات کاربردی دیگه که مربوط به watch میشه و می تونید تست رو reload کنید یا کارای دیگه ...

نتیجه گیری

تا به اینجای کار با نصب jest آشنا شدیم که بصورت پیشفرض باهاش میشه همه نوع کد JavaScript رو تست گرفت. ولی هدف اصلی ما React هستش و برای اینکه بتونیم component های react رو تست کنیم و آپشن یا امکانات خاص خود React رو داشته باشیم به ابزار دیگه یعنی Enzyme احتیاج داریم که در آموزش های بعدی قراره بیشتر در اینباره صحبت کنیم.

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

توصیه می کنم قسمت های بعدی رو از دست ندید , موفق باشید