Bileşenin test edilmesi enzimlerle reaksiyon

Şimdiye kadar WordPress için React’in gelişimi ile ilgili yayınlarımda, React, Yaratma-Reakt-App ve Jest ile test temellerini tartıştım. Jest, React bileşen oluşturma işlemini test etmek için yararlıdır. Test etmediğimiz birkaç büyük işlevsellik kovası var. Özellikle durumsal bileşenin iç durumunun, bileşen sınıf yönteminden izole edilen, DOM olaylarının ve testlerin nasıl değiştiğini. Yalnız jest bunu yapamaz. DOM testi için enzimleri kullanarak, varsayılan testlerle jest’in hızlı bir şekilde çok fazla test kapsamı yapabileceği açıktır. Bir anlık görüntü, tüm sahne ile bir bileşen içerir. Bahsettiğim bir sınır, herhangi bir bileşeni herhangi bir DOM türüne dönüştürmek değildir, bu nedenle bir olayı tetiklemenin bir yolu yoktur. Neyse ki, enzim, Jest’in çalışabileceği şey bunu yapmamıza izin verir – DOM olaylarını simüle eder. Ayrıca, özelliği ve bileşen durumunu kontrol etmek veya doğrudan sınıf yöntemini çağırmak için harika bir özelliğe sahiptir.
Enzimler varsayılan olarak Create-React-App’e yüklenmez. Enzim ve adaptör reaksiyonu enzim için monte etmek için:
Şimdi, enzimi test dosyasına hazırlamak için, render (montaj ve sığ) ve React adaptörünün bir veya her ikisini aktarıyoruz. Bu kapsama için reaksiyon adaptörü enzim örneğine eklenmelidir. Seçeneklerden birini kullanmıyorum. Başlık Dosyası Test Enzimleri Testim Şöyle Görünüyor:
Enzim testi enzimlerinde sığ oluşturma reaksiyonu bileşenleri vs iki sığ ve sığ şairlere sahiptir. Sığ bileşenleri sığ hale getirecektir, bu da herhangi bir bileşenin çocuk haline gelmeyeceği anlamına gelir. Derin bir render yapan montajdan daha hızlı yapar ve bu nedenle bileşenleri ve tüm çocukları yapar. Sığ sınırlamalar test için bir sorun değilse, sığ kullanın, daha hızlıdır. Bir bileşenin çocuklarını test etmeniz gerekiyorsa, bir montaj kullanın, çünkü çalışacaktır. Şimdilik sığ kullanacağız çünkü sadece bir bileşeni test ediyoruz. Mount’un daha sonra daha iyi bir seçim olduğu bazı vakaları tartışacağım. Jest’in reaksiyonunun oluşturulmasıyla daha önce yaptığımıza benzer sığ enzimlerle enzim oluşturma bileşenleri ile değişim olayının simüle edilmesi. Ancak geri dönen nesne çok daha kullanışlıdır. Find () enzim yöntemini, oluşturulan bileşenlerde öğeler bulmak için JQuery gibi seçmenlerle kullanabiliriz. Bulunan veya olayları simüle eden değerlere göre değerleri vurgulayabiliriz.
Yayınlar düzenleyicimiz için giriş bulalım, değiştirelim ve değiştirme işleyici işlevimizin iyi çalışıp çalışmadığını görelim. Aşağıdaki test aşağıda tartışacağım:
Üstte, bileşenlerimi içe aktarıyorum ve ekipmanları test ediyorum.Bu bileşenin tüm olayları ve bir test için bir dizi test yaptım.Yapay yayınlar anlık testler için kullandığımla aynı.Bu aslında aynı dosyaya dahildir.Burada netlik için testi kestim.Anlık görüntü testini kaydetmek için enzimlere duyulan ihtiyaç duydum, hiçbir şey yapmayan değişikliklerin denetleyicisini kullandım.Artık test, bu bileşenin destekleri değiştirme işlevi destekleri için doğru bir şekilde hazırladığını kanıtladığına göre, işleyişini kanıtlamak için bir test ekleyelim.Bağımlılık enjeksiyonunun faydaları burada – güncellemeleri bir bileşende, diğer bileşenlerde oluşturulduğunda ayrı ayrı test edebiliriz.Her test, güçlü bir bağlantı kurmadan daha fazla kapsama katmanı ekler.
Bu kez, test kapsamındaki değişkenleri güncelleyen değişikliklerde değişiklikler yapalım. Sonra doğru değeri canlandırdığından emin olabiliriz. Daha önce, bunun gibi bileşenlerin sadece değiştiğinde başlığı değil, tüm güncellenmiş yayınları geçmek zorunda olduğunu düşündüğümü söyledim. Bu, test edeceğimiz şeyin bir parçası. Başlığın özellik değerini test edeceğim. Çözüm nesneleri güncellendi. Yakalamak için değişikliklerimi ele alıyorum. Olay değişikliğini büyütelim. React Sentetik DOM olayını geri arama işleyicisine sürdürdü. Bu, nesne yönelimli programlamada polimorfizmin iyi bir örneğidir. React’te DOM’a dokunmamalıyız, sanal DOM soyutlamasına dokunuyoruz. Bu nedenle, “gerçek” JavaScript olayıyla aynı şekilde çalışan JavaScript olay soyutlamasıyla etkileşime girmeliyiz. Tırnak işaretlerinde “gerçek” kullanıyorum çünkü aslında JavaScript soyutlama React tarafından genişletilen bir web ateşi ile. Her şey soyutlamadır, hiçbir şey gerçek değildir, simülasyonda yaşıyoruz. Sonuç olarak, React’in tarayıcı sorunlarıyla başa çıkmasına izin veriyoruz. Bu aynı zamanda bir olayı simüle etmesini kolaylaştırır:
Tüm etkinlikle dalga geçmemize gerek yok, yeterli etkinlik.target.value. Bunun gibi manuel alay sınırlıdır ve alaycı daha kolay yönetilmek için bir sinon kullanmak isteyebilirsiniz. Döngüyü önceki enzim ile test edin Bu yazıda, bir yazı listesi yapmak için bir bileşen yaptım. Bazı sınıflara sarılacaklar. Test etmenin bir yolu, o sınıfla tüm öğeleri bulmak ve sonuçların uzunluğunu hesaplamaktır. Not, “CSS sınıfı” gibi “sınıf” kelimesini kullanıyorum “React sınıfını genişletme. Bileşen.” Bir kez daha, sözdizimi jQuery gibidir. Ayrıca, sığ yerine montajı kullandığımı fark ettiniz mi? Neden sığ bir çocuk bileşeni yapmayacak, test ettim-bu bileşen çocuklarını yapıyor. Ülkenin kendi sınıfının bileşenleri, durumlarının farkında olmayan bileşenler gördük. Sahne alıyorlar ve değişiklikler olarak devam eden işlevler aracılığıyla değişiklikler yapıyorlar. Ancak devlet bir yerde yaşamalıdır. Bu nedenle, sınıf bileşeni – durumu ele alıyorlar ve React’in yaşam döngüsünü öğreniyorlar.
Mesajlarımızı konteyner bileşenine yerleştirelim ve durumu yönetmek için bu bileşeni kullanalım. Unutmayın, React-Redux bunu yaptı. Endişeleri Facebook’a taşımadan önce kavramı anlayalım, bu genellikle günde çalışma saatlerinden daha fazla iş olduğu gerçeğini yönetme stratejimiz olmalıdır. Bu aynı zamanda, cep telefonumdan bağımlılık yapan davranışları kaldırmadan önce Facebook’un benden çalındığı her zaman iyi bir dönüş gibi geliyor. Gerçekten yapacağım şey, ana kabımın aptal olmasına ve Redux veya WordPress enjekte durumundan yüksek seviyeli bir bileşenle sarmasına izin vermek, ancak farklı bir tork direği ve ayrıca YouTube’da izleyebileceğiniz WP konferansından bir video. Durumsal bileşenler, tutumla kullanıldığında kullanışlıdır. Create-React-Appe tarafından üretilen bileşenleri “Uygulamalar” olarak listeler için bir foruma değiştirelim. Çünkü en küçük bölümden başladığımız için – yazı – sonra oradan çalışın – posta listesi ve şimdi posta listesi uygulaması – bu oldukça basit olmalıdır. Tüm küçük detaylar ele alınmıştır. Pek çok yazı ile başlamadık ve aynı anda birkaç bileşen tasarladık. Bunun yerine, monte etmeden önce inşa edilen tüm yapı taşlarına sahip olana kadar bekledik.
Boş bir dizi olarak yayınlayarak sınıf yapıcısına durum ekleyerek başlayalım.
Post bileşeni boş bir dizi değil. Yazı olmadığında ne yapmalı, onun işi değil. Bu nedenle, oluşturma yönteminde, JSX’i yalnızca dizi boş olmadığında görüntüleyecek şekilde koşullu kullanmak istiyorum: Bu benim bileşenlerim:
Bileşenin durumunu test etmek Enzimlerle reaksiyona girer, veri durumuna nasıl alınacağından bahsetmeden önce, bunu yaptıktan sonra düzgün çalışacağımızdan emin olalım. Bir zamanlar bir şey. Enzimlerle ilgili iyi bir şey, durumu doğrudan değiştirebilmek ve ayrıca bir bileşenin durumunu okuyabilmektir.
Pratik olarak, bu, Durum’a yayın ekleyeceğinden endişe etmeden bu bileşenin duruma eklendiğinde bu bileşenin çalışıp çalışmayacağını test edebileceğimiz anlamına gelir. Bu, hazır olur olmaz alacağımız ayrı bir komplikasyon. Önceden test etmemiz gereken şey iki şeydir: Döngümüzün durumun nasıl yayınlanacağı olup olmadığı ve boş olmadığı ve hiçbir şey göstermediği ve durum durumları boş olduğunda hata üretmediği. Enzim, testimizde sınıf ayar yöntemini çağırmamızı sağlayan bir SetState yöntemi sağlar. Bu sınıf, program durum yönetimimizin en üst seviyesidir, bu nedenle bu işlev burada haciz edilmelidir. Duruma bir gönderi ekleyen ve doğru bir şekilde oluşturulup oluşturulmadıklarını kontrol eden teste bakalım:

Bu, yayın bileşenleri için daha önce gösterdiğim teste çok benzer. Sadece bu bağlamda iyi çalıştığından emin oluruz. React sınıfı yöntemini enzimlerle çağırmak, bu uygulamayla bir gönderi düzenleme yeteneğini eklemek istediğimizi söylüyor. Zaten sıradan bileşenlerimiz var. Ancak doğru direği vermemiz gerekiyor. Şu anda düzenlenen yazının gönderisini izlemek için bildirmek için mülk ekleyelim. Gönderiyi State.Posts, sadece kimlikten kopyalamak istemiyorum. Durumda bir gönderi bulmak, kendi yöntemini alan ayrı bir sorundur. Yapıcıya ve yeni yöntemlere bakalım: Bu kurucuyu bu yönteme açıkça bağlamak için Bind işlevini nasıl kullanıyorum. Eğer bunu yapmazsam, this.state, this.settate ve this.props tanımlanmayacaktır. Bu, sınıftaki sahne veya eyalet kullanan her yöntem için atmanız gereken ekstra bir adımdır. O zaman bunu kullanabilirim ve sıradan bileşenim oluşturuyor:
Bu işlevi test etmek için – doğru direk bulundu ve editör yazı ne zaman bulunduğunu gösteriyor, bir çiğ testi ekleyeceğim. Her biri son tepeye inşa edildi. Önceki testlerimiz Post.State’i içerir, böylece aynı şeyi güvenli bir şekilde yapabilirim, ardından bir sonraki adımı test edebilirim:
Başarılı olduğuna inandıktan sonra – inan bana, test bu yöntemin ilk versiyonumdan mezun olmadı – durum, durum gerektirdiğinde editör tarafından gösterilen teste devam edebildim.
Bu test, gerektiğinde bir editör aldığımızı kanıtlıyor. Bu, editörün ne zaman yapmaması gerektiğini göstermediğini kanıtlamaz. Yani bu test, kendi başına sahte olumlu olabilir. Sahte pozitif olmadığını kanıtlamak için başka olasılıklar için bir teste ihtiyacımız var: Bu seriyi 3-4 daha fazla gönderi için sürüklemem gerekiyorsa, React değiştirme işleyicisinin son durumdaki etkisini test edin. Hangi yayınların güncellendiğini güncellemek için bileşenler ekleyeceğim ve bu uygulamanın bileşenlerine bağlayacağım. Uygulama bileşeninin durumunda değişikliklerin bir denetleyicisini gerektirecektir. Kontrol bileşen değişiklikleri çağrıldıktan sonra durumun nasıl test edileceğine dair örnekleri görebilmemiz için bunu ekleyelim ve test edelim. Değişiklik işleyicisini ayrı ayrı test edin, değerleri kontrol etmek için bileşenler uygulamadan önce, kontrolün tam tersi değil, bulunduğu arayüzün ihtiyaçlarına göre tasarlandığı anlamına gelir. Ayrıca, bu kontrol değiştirilebilir, değişim kontrolörü ile çalıştığı sürece, ne olduğu veya daha sonra ne değiştirdiği umurumda değil. İşte basit bir değişiklik işleyici işlevi, kontrol etmeye devam edebiliriz:
Bu, yöntemi doğrudan çağıran testtir, daha sonra enzim durum yöntemini kullanarak durumu test eder
Mesajları yüklemeye ne dersiniz?Bir noktada, gerçekten bir yazı eklemelisiniz.Bir kez daha, karmaşık konularda devlet yönetimine sunacağım.Ancak, bu uygulamadaki her şeyi özetlemek istiyorsanız, bu yüzden bir sınıfa ihtiyacımız var – React yaşam döngüsü olayından yararlanmak için.WordPress Actions gibi yaşam döngüsü olayı React – Program yürütmesinin belirli yerlerinde kodları çalıştırmanın yolları için fırsatlar.Bileşenler veya en erken, veri için AJAX’ı güvenli bir şekilde isteyebilir ve güncelleme durumu bileşendir.Bu, bileşen DOM’a yüklendiğinde çalışan olaydır.Etkinlikten önce durumu güncelleyemedik.