چگونه می توان با استفاده از مزخرف اجزای واکنش را آزمایش کرد

این مقاله توسط نویسنده مهمان ارائه شده است جک فرانکلین. پست های مهمان SitePoint قصد دارند محتوای جذاب نویسندگان و سخنرانان برجسته جامعه JavaScript را برای شما به ارمغان بیاورند.

در این مقاله ، نگاهی به استفاده خواهیم انداخت است – یک چارچوب تست که توسط فیس بوک نگهداری می شود – برای آزمایش ما عکس العمل نشان دهید اجزاء. ما قبل از اینکه برخی از ویژگی های خارج از جعبه را که به طور خاص با هدف ساده سازی آزمایش برنامه های React ارائه می شود ، بررسی کنیم که چگونه می توانیم ابتدا از Jest در توابع JavaScript ساده استفاده کنیم.

شایان ذکر است که هدف Jest به طور خاص React نیست: شما می توانید از آن برای آزمایش هرگونه برنامه JavaScript استفاده کنید. با این حال ، چند ویژگی که ارائه می دهد برای تست رابط کاربر بسیار مفید است ، به همین دلیل با React بسیار مناسب است.

برنامه نمونه

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

این برنامه در ES2015 نوشته شده است ، و با استفاده از بسته وب با Babel ES2015 و ایستگاه از پیش تنظیم شده تنظیم شده است. من وارد جزئیات تنظیمات ساختنی نخواهم شد ، اما همه اینهاست در repo GitHub اگر می خواهید آن را بررسی کنید. در مورد نحوه اجرای برنامه به صورت محلی ، دستورالعمل های کامل را در README خواهید یافت. اگر می خواهید بیشتر بخوانید ، برنامه با استفاده از ساخته می شود بسته وب، و من توصیه می کنم “راهنمای مبتدیان برای بسته بندی وب”به عنوان معرفی خوبی برای این ابزار.

نقطه ورود برنامه است app/index.js، که فقط ارائه می دهد Todos جز component در HTML:

render(
  <Todos />,
  document.getElementById('app')
);

Todos کامپوننت قطب اصلی برنامه است. این شامل تمام حالت (داده های رمزگذاری شده سخت برای این برنامه ، که در واقع به احتمال زیاد از یک API یا مشابه آن می آیند) ، و دارای کدی برای ارائه دو جزnder فرزند است: Todo، که یک بار برای هر todo در ایالت ارائه می شود ، و AddTodo، که یک بار ارائه می شود و فرم را برای کاربر فراهم می کند تا یک کار جدید را اضافه کند.

از آنجا که Todos جز component شامل تمام دولت ، آن را نیاز دارد Todo و AddTodo م componentsلفه ها برای تغییر هر زمان به آن اطلاع دهید. بنابراین ، توابع را به پایین به این م componentsلفه ها منتقل می کند که در صورت تغییر برخی داده ها می توانند آنها را فراخوانی کنند Todos می تواند وضعیت را به همین ترتیب به روز کند.

سرانجام ، در حال حاضر ، متوجه خواهید شد که تمام منطق تجارت در آن گنجانده شده است app/state-functions.js:

export function toggleDone(todos, id) {…}

export function addTodo(todos, todo) {…}

export function deleteTodo(todos, id) {…}

اینها همه توابع خالصی هستند که حالت (که برای برنامه نمونه ما آرایه ای از todos است) و برخی داده ها را گرفته و حالت جدید را برمی گردانند. اگر با عملکردهای خالص آشنا نیستید ، این توابع تنها ارجاع داده هایی هستند که داده می شوند و هیچ عارضه جانبی ندارند. برای اطلاعات بیشتر می توانید مطالعه کنید مقاله من در یک لیست جدا در عملکردهای خالص و مقاله من در SitePoint در مورد توابع خالص و React.

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

به TDD یا نه به TDD؟

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

معرفی Ex

است اولین بار در سال 2014 منتشر شد و گرچه در ابتدا مورد توجه بسیاری قرار گرفت ، اما پروژه برای مدتی خاموش بود و روی آن خیلی فعال نبود. با این حال ، فیس بوک تلاش زیادی برای بهبود Jest کرده است و اخیراً چند نسخه با تغییرات چشمگیر منتشر کرده است که ارزش تجدیدنظر را دارد. تنها شباهت Jest در مقایسه با نسخه اولیه منبع باز ، نام و نشان است. همه موارد دیگر تغییر کرده و بازنویسی شده است. اگر می خواهید در این مورد بیشتر بدانید ، می توانید مطالعه کنید نظر کریستوف پوجر، جایی که او در مورد وضعیت فعلی پروژه بحث می کند.

اگر از راه اندازی تست های Babel ، React و JSX با استفاده از یک فریم ورک دیگر ناامید شده اید ، قطعاً توصیه می کنم Jest را امتحان کنید. اگر تنظیمات آزمایشی موجود خود را به کندی پیدا کرده اید ، من نیز Jest را بسیار توصیه می کنم. به طور خودکار آزمایش ها را به طور موازی اجرا می کند و حالت تماشای آن قادر است فقط تست های مربوط به پرونده تغییر یافته را اجرا کند ، که اگر یک مجموعه تست بزرگ داشته باشید بسیار ارزشمند است. همراه است JSDom پیکربندی شده است ، به این معنی که می توانید آزمایشات مرورگر را بنویسید اما آنها را از طریق Node اجرا کنید. این می تواند با آزمایشات ناهمزمان کنار بیاید و دارای ویژگی های پیشرفته ای مانند تمسخر ، جاسوس ها و مقاله های خرد است.

نصب و پیکربندی Jest

برای شروع ، باید Jest را نصب کنیم. از آنجا که ما همچنین از Babel استفاده می کنیم ، ما چند ماژول دیگر را نصب خواهیم کرد که باعث می شود Jest و Babel به راحتی همراه با Babel و تنظیمات از پیش تنظیم شده خارج از جعبه بازی کنند:

npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react

شما همچنین نیاز به یک babel.config.js پرونده را با استفاده از Babel پیکربندی کنید تا از پیش تنظیمات و افزونه های مورد نیاز شما استفاده کند. پروژه نمونه از قبل دارای این پرونده است که به صورت زیر است:

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
  ],
};

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

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

Jest انتظار دارد که آزمایشات ما را در a پیدا کند __tests__ پوشه ، که به یک کنوانسیون محبوب در انجمن JavaScript تبدیل شده است ، و یکی از مواردی است که ما در اینجا به آن پایبند خواهیم بود. اگر شما از طرفداران __tests__ راه اندازی ، خارج از جعبه ، Jest همچنین از یافتن مواردی پشتیبانی می کند .test.js و .spec.js پرونده ها نیز

همانطور که در حال آزمایش عملکردهای حالت خود هستیم ، پیش بروید و ایجاد کنید __tests__/state-functions.test.js.

به زودی یک تست مناسب خواهیم نوشت ، اما در حال حاضر ، این تست ساختگی را قرار دهید ، که به ما امکان می دهد همه کارها را به درستی بررسی کنیم و Jest را پیکربندی کرده ایم:

describe('Addition', () => {
  it('knows that 2 and 2 make 4', () => {
    expect(2 + 2).toBe(4);
  });
});

اکنون ، به درون خود بروید package.json. ما باید راه اندازی کنیم npm test به طوری که Jest را اجرا می کند ، و ما می توانیم آن را به سادگی با تنظیم کردن انجام دهیم test اسکریپت برای اجرا jest:

"scripts": {
  "test": "jest"
}

اگر اکنون می دوید npm test به صورت محلی ، باید آزمایشات خود را ببینید و قبول شوید!

PASS  __tests__/state-functions.test.js
  Addition
    ✓ knows that 2 and 2 make 4 (5ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 passed, 0 total
Time:        3.11s

اگر تا به حال از Jasmine یا بیشتر چارچوب های آزمایش استفاده کرده اید ، کد آزمون فوق باید کاملاً آشنا باشد. شوخی به ما اجازه استفاده می دهد describe و it آزمایشات لانه را همانطور که لازم است انجام دهیم. اینکه از چه لانه ای استفاده می کنید به خود شما بستگی دارد. من دوست دارم خودم را لانه کنم بنابراین همه رشته های توصیفی به آنجا منتقل می شوند describe و it تقریباً به صورت یک جمله بخوانید.

وقتی صحبت از ادعای واقعی می شود ، چیزی را که می خواهید آزمایش کنید ، درون آن قرار می دهید expect() تماس بگیرید ، قبل از آنکه یک ادعا را روی آن صدا کنید در این مورد ، ما استفاده کرده ایم toBe. می توانید لیستی از تمام ادعاهای موجود را بیابید در اسناد شوخی. toBe با استفاده از بررسی می کند که مقدار داده شده با مقدار مورد آزمایش مطابقت داشته باشد === برای انجام این کار ما از طریق این آموزش با چند ادعای Jest روبرو خواهیم شد.

ادامه مطالعه نحوه آزمایش اجزای واکنش دهنده با استفاده از مزخرف در SitePoint.