Reaksiyon Bileşenlerinin Test Edilmesi En İyi Uygulamalar

React Developers @ Selleo tarafından

React bileşenlerini test etmek için en popüler yaklaşım Mocha + Chai + Enzyme veya Jest + Enzyme kullanmaktır. Bu makalede, React bileşen test uygulamalarımızı Mocha + Chai için de geçerli olan Jest + Enzyme ile açıklayacağız.

React bileşenlerini test etme konusunda yeniyseniz, aşağıdakileri de okumalısınız:

  • “Test yazma” üzerine create-react-app README bölümü
  • Jest - Başlarken
  • Enzim API dokümantasyonu

Test organizasyonu

Daha büyük JavaScript projelerinde __tests__ alt klasöründe uygulamaya yakın testler yaptık. Genellikle, bir bileşene yönelik testler yapıya göre gruplandırılır ve bunun üzerine davranış eklenir:

Minimal komponent testi, oluşturulan komponenti doğrular

Minimal bileşen testleri, bileşenin uygun şekilde aka-duman testi veya “Yapı Doğrulama Testi” verdiğini doğrular. Enzim ile yapılabilir:

veya Jest anlık görüntüsü:

Daha sonra __snapshots __ / MainSection.spec.js.snap dosyasını oluşturur.

Anlık görüntülerde yapılan değişiklikler, sesli mesajdaki "u" yoluyla yerel olarak onaylanır ve git deposuna bağlanır, böylece PR incelemesi bunları görebilir. Anlık Görüntü Testi hakkında daha fazla bilgi edinebilirsiniz

Şu anda, anlık görüntülerin kullanımını bileşen oluşturma ve karmaşık json (yani grafik yapılandırmaları) ile sınırlandırıyoruz.

Tamam, oluşturma işlemlerini test ediyorum - başka ne test etmeliyim?

Testlerin yazmanız ve sürdürmeniz gereken bir şey olduğunu aklınızda bulundurmanız gerekir. İyi testler yazmak, uygulama kodunu oluşturmak kadar zanaat gerektirir.

Testler, geliştiriciler için otomatik kalite güvencesi ve dokümantasyondur. Proje ve ekip ne kadar büyükse, ihtiyacınız olan daha ayrıntılı testlerdir.

Bu bileşene geri döneceğinizi veya yeniden değerlendirebileceğiniz geleceği düşünmeye çalışın - testlerden beklentileriniz neler olurdu?

  • İzole - harici servislerle olan tüm etkileşimler alay edilmeli
  • Özel - Küçük işlevselliği değiştirirseniz, belirli bir test hatası mesajı almak istersiniz.
  • Sistemin nasıl yapamadığını açıklarlar, böylece kolayca refaktör olursunuz

Bu hedeflere ulaşmak için yararlı bulduğumuz bazı uygulamaları gözden geçirelim.

BeforeEach () yerine açık setup ()

Açık setup () işlevini kullanmanın yararı, herhangi bir testte bileşenin nasıl başlatıldığının açık olmasıdır. Kurulum nesnesi ayrıca, sarıcı ile etkileşime giren bazı yardımcı işlevleri bağlamak için iyi bir yerdir, yani.

Test davranışı

Uygulamada test etme davranışı, belirli girdilerin ve benzetilen olayların beklenen sonuçlara yol açıp açmadığını test etmeye gider.

Setup () testlerinin gerçekten hızlı yazılmasının nasıl yapıldığını görebilirsiniz!

Yardımcı işlevleri kullanın

Bazen sadece bir giriş değişkeni değiştirilmiş olarak benzer testler yazmamız gerekir. Bu, test üreten yardımcı işleviyle ele alınabilir:

Çok meyilli okur ve bakımı kolaydır.

özet

Bu makalede açıklanan uygulamalar:

  • testleri __tests__ alt klasöründe uygulamaya koy
  • Her zaman basit bileşen oluşturma testi, yani duman testi, ardından test davranışı
  • geleceğe düşünün, bu bileşene geri döndüğünüzde veya yeniden değerlendiriyorsanız
  • Açık setup () kullanın ve onunla ortak kısayol değişkenleri döndürün
  • Test üreten yardımcı fonksiyonları kullanmak

Bu makaleyi yararlı bulduğunuzu umuyoruz. Çalışma örneği kodunu redux todomvc kodunun çatalında https://github.com/tb/redux/tree/react-testing/examples/todomvc/src/components/__tests__ adresinde bulabilirsiniz.