Sinov reaktsiyasining tarkibiy qismlari eng yaxshi amaliyotlar

React Developers @ Selleo tomonidan

React tarkibiy qismlarini sinashda eng mashhur yondashuv Mocha + Chai + Enzim yoki Jest + Enzim foydalanishdir. Ushbu maqolada biz Moest + Chai uchun ham qo'llaniladigan Jest + Enzim yordamida sinov reaktsiyamizni sinovdan o'tkazamiz.

Agar siz React tarkibiy qismlarini sinab ko'rish uchun yangi bo'lsangiz, quyidagilarni o'qing

  • "Yozish testlari" bo'limida README bo'limini yaratish
  • Jest - Boshlash
  • Ferment API uchun hujjatlar

Sinovlarni tashkil qilish

Katta JavaScript loyihalarida biz __tests__ pastki jildida sinovlarni amalga oshiramiz. Odatda, tarkibiy qism uchun testlar struktura bo'yicha guruhlanadi va uning ustiga xatti-harakatlar qo'shiladi, masalan:

Minimal komponent testi taqdim etilgan komponentni tasdiqlaydi

Minimal tarkibiy sinovlar ushbu komponent to'g'ri tutun sinovi yoki "Verifikatsiya sinovini o'tkazish" mosligini tekshiradi. Buni ferment yordamida amalga oshirish mumkin:

yoki Jest oniy surati:

Keyinchalik __snapshots __ / MainSection.spec.js.snap faylini yaratadi.

Suratlardagi o'zgarishlar lokal ravishda 'u' orqali tasdiqlanadi va git omboriga topshiriladi, shuning uchun ularni PR sharhlovchisi ko'rishi mumkin. Snapshot Testing haqida ko'proq ma'lumot olishingiz mumkin

Ayni paytda biz suratlardan tarkibiy qismlarni va murakkab jsonlarni (ya'ni grafik konfiguratsiyalarini) cheklashni cheklaymiz.

Ok, men sotuvchilarni sinovdan o'tkazaman - yana nima sinovdan o'tishim kerak?

Shuni yodda tutish kerakki, testlar siz yozishingiz va saqlashingiz kerak bo'lgan narsa. Yaxshi testlarni yozish uchun dastur kodini yaratish kabi ko'p mahorat talab etiladi.

Sinovlar - ishlab chiqaruvchilar uchun avtomatlashtirilgan sifat nazorati va hujjatlar. Loyiha va jamoa qanchalik katta bo'lsa, sizga kerak bo'lgan batafsil testlar kerak bo'ladi.

Kelgusida ushbu tarkibiy qismga qaytish yoki uni qayta tiklash to'g'risida o'ylashga harakat qiling - testlardan nimani kutmoqdasiz?

  • Izolyatsiya qilingan - tashqi xizmatlar bilan o'zaro aloqalar ustidan kulish kerak
  • Maxsus - agar kichik funktsional imkoniyatlarni o'zgartirsangiz, siz test sinovlari muvaffaqiyatsizligi to'g'risida aniq xabarni olishni xohlaysiz
  • Ular tizimda qanday qilib ishlamasligini tasvirlaydilar, shuning uchun siz osonlikcha qayta ishlata olasiz

Keling, ushbu maqsadlarga erishishda yordam beradigan ba'zi amaliyotlarni ko'rib chiqaylik.

BeforeEach () o'rniga aniq o'rnatish ()

Aniq o'rnatish () funktsiyasidan foydalanishning afzalligi shundaki, har qanday testda komponent qanday boshlanganligi aniq bo'ladi. O'rnatish ob'ekti, shuningdek, o'rash bilan o'zaro aloqada bo'lgan yordamchi funktsiyalarni ulash uchun yaxshi joy, ya'ni.

Sinov xatti-harakatlari

Xatti-harakatlarning amalda sinab ko'rilishi, agar ma'lum kirishlar va taqlid qilingan hodisalar kutilgan natijalarga olib kelsa, sinovdan o'tmoqda.

O'rnatish () qanday qilib bu testlarni juda tez yozishini bilib olasiz!

Yordamchi funktsiyalardan foydalaning

Ba'zan biz shunchaki bitta kirish o'zgaruvchisining o'zgarishi bilan shunga o'xshash ko'plab testlarni yozishimiz kerak. Bu testni yaratadigan yordamchi funktsiyaga murojaat qilish mumkin:

U juda qattiq o'qiydi va saqlash osonroq.

Xulosa

Ushbu maqolada tavsiflangan amaliyotlar:

  • sinovlarni __tests__ pastki papkasida amalga oshirishga yaqin qo'ying
  • har doim oddiy tarkibiy qismlarni sinovdan o'tkazish bilan boshlang aka tutun sinovi, so'ngra xulq-atvorni sinab ko'rish
  • kelajakda ushbu tarkibiy qismga qaytishingiz yoki uni qayta ishlab chiqishingiz haqida o'ylang
  • aniq o'rnatish () dan foydalaning va u bilan umumiy yorliqli parametrlarni qaytaring
  • sinovlarni keltirib chiqaradigan yordamchi funktsiyalardan foydalaning

Umid qilamizki, siz ushbu maqolani foydali deb topdingiz. Siz ishlaydigan misol kodini redux todomvc kodidan topishingiz mumkin: https://github.com/tb/redux/tree/react-testing/examples/todomvc/src/component/__tests__