Bu yazıda, React bileşenlerini test etmek için tasarlanmış popüler kitaplık Enzyme ile birlikte Jest adlı bir React test aracını tanıtacağım. Size, testleri çalıştırma, React bileşenlerini test etme, anlık görüntü testi ve alay etme dahil olmak üzere Jest test tekniklerini tanıtacağım. Test etme konusunda yeniyseniz ve nasıl başlayacağınızı merak ediyorsanız, teste girişle başlayacağımız için bu öğreticiyi faydalı bulacaksınız. Sonunda, Jest ve Enzyme kullanarak React uygulamalarını test ederek çalışır hale geleceksiniz. Bu öğreticiyi takip etmek için React'e aşina olmalısınız.

Teste Kısa Bir Giriş

Test etme, kodunuzun nasıl yürütüleceğinin satır satır gözden geçirilmesidir. Bir uygulama için bir dizi test, bir uygulamanın başarılı ve hatasız bir şekilde yürütülüp yürütülmediğini doğrulamak için çeşitli kod bitlerini içerir. Test, kodda güncellemeler yapıldığında da kullanışlıdır. Bir kod parçasını güncelledikten sonra, güncellemenin uygulamada zaten bulunan işlevselliği bozmadığından emin olmak için bir test çalıştırabilirsiniz.

Neden Testi?

Bir şeyi yapmadan önce neden yaptığımızı anlamak iyidir. Peki, neden test ve amacı nedir?

1. Testin ilk amacı gerilemeyi önlemektir. Gerileme, daha önce düzeltilmiş bir hatanın yeniden ortaya çıkmasıdır. Belirli bir olay meydana geldikten sonra bir özelliğin amaçlandığı gibi çalışmasını durdurur.
2. Test, karmaşık bileşenlerin ve modüler uygulamaların işlevselliğini sağlar.
3. Bir yazılım uygulamasının veya ürünün etkin performansı için test yapılması gerekir.

Test etme, bir uygulamayı daha sağlam ve hataya daha az eğilimli hale getirir. Bu, kodunuzun istediğinizi yaptığını ve uygulamanızın kullanıcılarınız için tasarlandığı şekilde çalıştığını doğrulamanın bir yoludur.

Test türlerini ve ne yaptıklarını gözden geçirelim.

Ünite testi

Bu test türünde, yazılımın bağımsız birimleri veya bileşenleri test edilir. Bir birim, bireysel bir işlev, yöntem, prosedür, modül veya nesne olabilir. Bir birim testi, yazılım kodunun her biriminin beklendiği gibi çalıştığını doğrulamak için bir kod bölümünü yalıtır ve doğruluğunu doğrular.

Birim testinde, düzgün çalıştıklarını garanti etmek için ayrı prosedürler veya işlevler test edilir ve tüm bileşenler ayrı ayrı test edilir. Örneğin, bir işlevi test etmek veya bir programdaki bir ifadenin veya döngünün düzgün çalışıp çalışmadığının test edilmesi, birim testi kapsamına girer.

Bileşen Testi

Bileşen testi, bir uygulamanın tek bir bölümünün işlevselliğini doğrular. Testler, diğer bileşenlerden ayrı olarak her bir bileşen üzerinde gerçekleştirilir. Genel olarak, React uygulamaları birkaç bileşenden oluşur, bu nedenle bileşen testi, bu bileşenlerin ayrı ayrı test edilmesiyle ilgilenir.

Örneğin, birçok bileşene sahip farklı web sayfalarına sahip bir web sitesi düşünün. Her bileşenin kendi alt bileşenleri olacaktır. Her modülün diğer bileşenlerle entegrasyonu düşünmeden test edilmesine bileşen testi denir.

React'te bu şekilde test yapmak daha karmaşık araçlar gerektirir. Dolayısıyla, Jest'e ve bazen daha sonra kısaca tartışacağımız Enzyme gibi daha karmaşık araçlara ihtiyacımız olacak.

Anlık Görüntü Testi

Anlık görüntü testi, bir web uygulamasının kullanıcı arabiriminin (UI) beklenmedik şekilde değişmemesini sağlar. Bileşenin kodunu herhangi bir zamanda yakalar, böylece bileşeni bir durumdaki diğer olası durumlarla karşılaştırabiliriz.

Anlık görüntü testi hakkında daha sonraki bir bölümde öğreneceğiz.

Testin Avantajları ve Dezavantajları

Test harikadır ve yapılmalıdır, ancak avantajları ve dezavantajları vardır.

Avantajlar

1. Beklenmedik gerilemeyi önler.
2. Geliştiricinin geçmiş hakkında endişelenmek yerine mevcut göreve odaklanmasını sağlar.
3. Aksi takdirde inşa edilmesi çok karmaşık olacak bir uygulamanın modüler bir şekilde oluşturulmasına izin verir.
4. Manuel doğrulama ihtiyacını azaltır.
   

Dezavantajları

1. Hata ayıklama ve bakım yapmanın yanı sıra daha fazla kod yazmanız gerekir.
2. Kritik olmayan test hataları, uygulamanın sürekli entegrasyon açısından reddedilmesine neden olabilir.

Jest'e Giriş

Jest, sadeliğe odaklanan keyifli bir JavaScript test çerçevesidir. npm veya Yarn ile kurulabilir. Jest, test koşucuları olarak bilinen daha geniş bir yardımcı program kategorisine uyar. React uygulamaları için harika çalışıyor, ancak React uygulamalarının dışında da harika çalışıyor.

Enzyme, React uygulamalarını test etmek için kullanılan bir kütüphanedir. Bileşenleri test etmek için tasarlanmıştır ve kullanıcı arayüzünün doğru çalışıp çalışmadığını onaylayan eylemleri simüle eden iddialar yazmayı mümkün kılar.

Jest ve Enzyme birbirini çok iyi tamamlıyor, bu yüzden bu yazıda ikisini de kullanacağız.

Jest ile Test Çalıştırma İşlemi

Bu bölümde Jest kurulumu ve yazma testleri yapacağız. React'te yeniyseniz, kullanıma hazır olduğundan ve Jest ile birlikte gönderildiğinden Create React App'i kullanmanızı öneririm.

 npm init react-app my-app

Enzyme **** ve enzyme-adapter-react-16 react-test-renderer ile kurmamız gerekiyor (sayı, kullandığınız React sürümüne göre olmalıdır).

 npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer

Artık hem Jest hem de Enzyme ile projemizi oluşturduğumuza göre, projenin src klasöründe bir setupTest.js dosyası oluşturmamız gerekiyor. Dosya şöyle görünmelidir:

 import { configure } from "enzyme"; import Adapter from "enzyme-adapter-react-16"; configure({ adapter: new Adapter() });

Bu, Enzim'i içe aktarır ve bağdaştırıcıyı testlerimizi çalıştıracak şekilde ayarlar.

Devam etmeden önce, bazı temel bilgileri öğrenelim. Bu makalede bazı önemli şeyler çokça kullanılıyor ve bunları anlamanız gerekecek.

• it veya test Bu yönteme bir işlev iletirsiniz ve test çalıştırıcısı bu işlevi bir test bloğu olarak yürütür.
• describe Bu isteğe bağlı yöntem, it bir sayıda veya test ifadesini gruplamak içindir.
• expect Bu, testin geçmesi gereken koşuldur. Alınan parametreyi eşleştiriciyle karşılaştırır. Ayrıca, farklı şeyleri doğrulamanıza izin veren bir dizi eşleştiriciye erişmenizi sağlar. Bununla ilgili daha fazla bilgiyi belgelerde okuyabilirsiniz.
• mount Bu yöntem, testleri yürüttüğümüz ana bileşenin alt bileşenleri de dahil olmak üzere tam DOM'yi işler.
• shallow Bu, yalnızca test ettiğimiz bileşenleri tek tek işler. Alt bileşenleri oluşturmaz. Bu, bileşenleri ayrı ayrı test etmemizi sağlar.

Test Dosyası Oluşturma

Jest, neyin test dosyası olup neyin olmadığını nasıl biliyor? İlk kural, __test__ adlı herhangi bir dizinde bulunan dosyaların bir test olarak kabul edilmesidir. Bu klasörlerden birine bir JavaScript dosyası koyarsanız, Jest'i aradığınızda, iyi ya da kötü, Jest onu çalıştırmayı deneyecektir. İkinci kural, .spec.js veya .test.js son ekine sahip herhangi bir dosyayı tanıyacağıdır. Tüm deponuzdaki tüm klasörlerin ve tüm dosyaların adlarını arayacaktır.

Bu eğitim için oluşturulmuş bir React mini uygulaması için ilk testimizi oluşturalım. GitHub'da klonlayabilirsiniz. Tüm paketleri kurmak için npm install çalıştırın ve ardından npm start uygulamayı başlatmaya başlayın. Daha fazla bilgi için README.md dosyasına bakın.

İlk testimizi yazmak için App.test.js . İlk olarak, uygulama bileşenimizin doğru şekilde işlenip işlenmediğini ve bir çıktı belirleyip belirtmediğimizi kontrol edin:

 it("renders without crashing", () => { shallow(<App />); }); it("renders Account header", () => { const wrapper = shallow(<App />); const welcome = <h1>Display Active Users Account Details</h1>; expect(wrapper.contains(welcome)).toEqual(true); });

Yukarıdaki testte, shallow olan ilk test, uygulama bileşenimizin çökmeden doğru şekilde işlenip işlenmediğini kontrol eder. shallow yöntemin, alt bileşenler olmadan yalnızca tek bir bileşen oluşturduğunu unutmayın.

İkinci test, toEqual Jest eşleştiricisi ile uygulama bileşenimizde "Etkin Kullanıcı Hesabını Görüntüle" h1 etiketi çıktısını belirtip belirtmediğimizi kontrol eder.

Şimdi testi çalıştırın:

 npm run test /* OR */ npm test

Terminalinizdeki çıktı şöyle olmalıdır:

 PASS src/App.test.js √ renders without crashing (34ms) √ renders Account header (13ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 11.239s, estimated 16s Ran all test suites related to changed files. Watch Usage: Press w to show more.

Gördüğünüz gibi testimiz geçti. Jest çalıştırıldığında iki başarılı test ile App.test.js adında bir test takımımız olduğunu gösteriyor. Anlık görüntü testi hakkında daha sonra konuşacağız ve ayrıca başarısız bir test örneğini de göreceksiniz.

Bir Testi Atlama veya Yalıtma

Bir testi atlamak veya izole etmek, Jest çalıştığında, belirli bir işaretli testin çalıştırılmadığı anlamına gelir.

 it.skip("renders without crashing", () => { shallow(<App />); }); it("renders Account header", () => { const wrapper = shallow(<App />); const header = <h1>Display Active Users Account Details</h1>; expect(wrapper.contains(header)).toEqual(true); });

Testi izole etmek için skip yöntemini kullandığımız için ilk testimiz atlanacak. Bu nedenle, Jest çalıştığında testimizde çalışmayacak veya herhangi bir değişiklik yapmayacaktır. Sadece ikincisi çalışacak. it.only() de kullanabilirsiniz.

Bir test dosyasında değişiklik yapmak ve ardından npm test tekrar manuel olarak çalıştırmak biraz sinir bozucu. Jest, dosya değişikliklerini izleyen ve buna göre testler yapan izleme modu adlı güzel bir özelliğe sahiptir. Jest'i izleme modunda çalıştırmak için npm test -- --watch veya jest --watch . Bu öğreticinin geri kalanı için Jest'i terminal penceresinde çalışır durumda bırakmanızı da tavsiye ederim.

alay işlevi

Sahte, herhangi bir gerçek iç çalışma olmaksızın bir nesnenin veya modülün ikna edici bir kopyasıdır. Küçük bir işlevselliğe sahip olabilir, ancak gerçek şeyle karşılaştırıldığında, bu bir sahte. Jest tarafından otomatik olarak veya manuel olarak oluşturulabilir.

Neden alay edelim? Alay etme bağımlılıkların sayısını, yani bir test çalıştırıldığında yüklenmesi ve ayrıştırılması gereken ilgili dosyaların sayısını azaltır. Bu nedenle, çok sayıda alay kullanmak, testlerin daha hızlı yürütülmesini sağlar.

Sahte işlevler aynı zamanda "casuslar" olarak da bilinir, çünkü yalnızca çıktıyı test etmek yerine başka bir kod tarafından doğrudan çağrılan bir işlevin davranışını gözetlemenize izin verirler.

Bir işlevle alay etmenin iki yolu vardır: ya onu test kodunda kullanmak için bir sahte işlev oluşturarak ya da bir modül bağımlılığını geçersiz kılmak için el ile bir sahte işlev yazarak.

Manuel alaylar ****, sahte verilerle işlevselliği saplamak için kullanılır. Örneğin, bir web sitesi veya veritabanı gibi uzak bir kaynağa erişmek yerine, sahte verileri kullanmanıza izin veren manuel bir sahte oluşturmak isteyebilirsiniz.

Bir sonraki bölümde bir sahte fonksiyon kullanacağız.

React Bileşenlerini Test Etme

Bu bölüm, React bileşenlerinin nasıl test edileceğini anlamak için şimdiye kadar edindiğimiz tüm bilgileri birleştirecektir. Test etme, bir bileşenin çıktısının beklenmedik şekilde başka bir şeye dönüşmediğinden emin olmayı içerir. Bileşenleri doğru şekilde oluşturmak, başarılı bir test sağlamanın açık ara en etkili yoludur.

Yapabileceğimiz bir şey, bileşen donanımlarını test etmektir - özellikle, bir bileşenden donanımların diğerine aktarılıp aktarılmadığını test etmek. Jest ve Enzyme API, bileşenler arasında donanımların geçip geçmediğini simüle etmek için sahte bir işlev oluşturmamıza izin verir.

Kullanıcı hesabı özelliklerini ana App bileşeninden Account bileşenine geçirmeliyiz. Kullanıcıların aktif hesabını oluşturmak için kullanıcı hesabı ayrıntılarını Account vermemiz gerekiyor. Alay etmenin işe yaradığı yer burasıdır ve bileşenlerimizi sahte verilerle test etmemizi sağlar.

user aksesuarları için bir sahte oluşturalım:

 const user = { name: "Adeneye David", email: "[email protected]", username: "Dave", };

Test dosyamızda manuel bir sahte fonksiyon oluşturduk ve onu bileşenlerin etrafına sardık. Diyelim ki geniş bir kullanıcı veritabanını test ediyoruz. Veritabanına doğrudan test dosyamızdan erişmeniz önerilmez. Bunun yerine, bileşenimizi test etmek için sahte verileri kullanmamızı sağlayan bir sahte işlev oluşturuyoruz.

 describe(" ", () => { it("accepts user account props", () => { const wrapper = mount(<Account user={user} />); expect(wrapper.props().user).toEqual(user); }); it("contains users account email", () => { const wrapper = mount(<Account user={user} />); const value = wrapper.find("p").text(); expect(value).toEqual("[email protected]"); }); }); describe(" ", () => { it("accepts user account props", () => { const wrapper = mount(<Account user={user} />); expect(wrapper.props().user).toEqual(user); }); it("contains users account email", () => { const wrapper = mount(<Account user={user} />); const value = wrapper.find("p").text(); expect(value).toEqual("[email protected]"); }); });

Yukarıda iki testimiz var ve test edilen bileşeni alan bir describe katmanı kullanıyoruz. Test tarafından geçilmesini beklediğimiz props ve değerleri belirterek ilerlenebiliriz.

İlk testte, mount edilen bileşene geçirdiğimiz propların, yukarıda oluşturduğumuz sahte proplara eşit olup olmadığını kontrol ediyoruz.

İkinci test için, kullanıcı donanımlarını bağlı Account bileşenine geçiriyoruz. Ardından, Account bileşeninde sahip olduğumuza karşılık gelen <p> öğesini bulup bulamayacağımızı kontrol ederiz. Test paketini çalıştırdığımızda, testin başarıyla çalıştığını göreceksiniz.

Bileşenimizin durumunu da test edebiliriz. Hata mesajının durumunun null değerine eşit olup olmadığını kontrol edelim:

 it("renders correctly with no error message", () => { const wrapper = mount( ); expect(wrapper.state("error")).toEqual(null); }); it("renders correctly with no error message", () => { const wrapper = mount( ); expect(wrapper.state("error")).toEqual(null); });

Bu testte, bir toEqual() eşleştirici kullanarak bileşen hatamızın durumunun null değerine eşit olup olmadığını kontrol ederiz. Uygulamamızda bir hata mesajı varsa, çalıştırıldığında test başarısız olacaktır.

Bir sonraki bölümde, bir başka şaşırtıcı teknik olan anlık görüntü testi ile React bileşenlerinin nasıl test edileceğini inceleyeceğiz.

Anlık Görüntü Testi

Anlık görüntü testi, testin yanında depolanan bir referans anlık görüntü dosyasıyla karşılaştırmak için bir bileşenin kodunu herhangi bir zamanda yakalar. Bir uygulamanın kullanıcı arayüzündeki değişiklikleri takip etmek için kullanılır.

Bir anlık görüntünün gerçek kod gösterimi bir JSON dosyasıdır ve bu JSON, anlık görüntü yapıldığında bileşenin nasıl göründüğünün bir kaydını içerir. Bir test sırasında Jest, bu JSON dosyasının içeriğini test sırasında bileşenin çıktısıyla karşılaştırır. Eşleşirlerse test geçer; yapmazlarsa, test başarısız olur.

Bir Enzim sarmalayıcısını Jest anlık görüntü testiyle uyumlu bir biçime dönüştürmek için, enzyme-to-json yüklememiz gerekir:

 npm install --save-dev enzyme-to-json

Anlık görüntü testimizi oluşturalım. İlk çalıştırdığımızda, o bileşenin kodunun anlık görüntüsü oluşturulacak ve src dizinindeki yeni bir __snapshots__ klasörüne kaydedilecektir.

 it("renders correctly", () => { const tree = shallow(<App />); expect(toJson(tree)).toMatchSnapshot(); });

Yukarıdaki test başarılı bir şekilde çalıştığında, mevcut UI bileşeni mevcut olanla karşılaştırılacaktır.

Şimdi testi çalıştıralım:

 npm run test

Test paketi çalıştığında, yeni bir anlık görüntü oluşturulacak ve __snapshots__ klasörüne kaydedilecektir. Daha sonra bir test yaptığımızda Jest, bileşenlerin anlık görüntüyle eşleşip eşleşmediğini kontrol edecek.

Önceki bölümde açıklandığı gibi, Enzim paketindeki bu shallow yöntem, tek bir bileşen oluşturmak için kullanılır ve başka bir şey değildir. Alt bileşenleri oluşturmaz. Bunun yerine, bize kodu yalıtmak ve hata ayıklarken daha iyi bilgi almak için güzel bir yol sağlar. mount adlı başka bir yöntem, testleri yürüttüğümüz ana bileşenin alt bileşenleri de dahil olmak üzere tam DOM'yi oluşturmak için kullanılır.

Anlık görüntüümüzü de güncelleyebiliriz, Testimizin başarısız olması için bileşenimizde bazı değişiklikler yapalım, bu durum bileşen artık anlık görüntü dosyasında sahip olduğumuza karşılık gelmediği için gerçekleşecek. Bunu yapmak için, bileşenimizdeki <h3> etiketini <h3> Loading...</h3> yerine <h3>Fetching Users...</h3> olarak değiştirelim. Test çalıştığında, terminalde alacağımız şey:

 FAIL src/App.test.js (30.696s) × renders correctly (44ms) ● renders correctly expect(received).toMatchSnapshot() Snapshot name: `renders correctly 1 - Snapshot + Received FAIL src/App.test.js (30.696s) × renders correctly (44ms) ● renders correctly expect(received).toMatchSnapshot() Snapshot name: `renders correctly 1 - Snapshot + Received

          Etkin Kullanıcı Hesap Ayrıntılarını Görüntüle
        
        

    - Yükleniyor...
    + Kullanıcılar Alınıyor...
        
      

       7 | it("doğru işliyor", ()
=> {
       8 | const sarmalayıcı = sığ( );
    > 9 | bekle(toJson(sarmalayıcı))).toMatchSnapshot();
         | ^ 10 | });
      11 |
      12 | /* it("çarpmadan işlenir", () => {

      Object'te. (src/App.test.js:9:27)

 › 1 anlık görüntü başarısız oldu.
Anlık Görüntü Özeti
 › 1 test takımından 1 anlık görüntü başarısız oldu. Kod değişikliklerinizi inceleyin veya güncellemek için `u` tuşuna basın.

Test Süitleri: 1 başarısız, toplam 1
Testler: 1 başarısız, 1 toplam
Anlık görüntüler: 1 başarısız, toplam 1
Zaman: 92.274s
Değiştirilen dosyalarla ilgili tüm test takımlarını çalıştırın.

Kullanım İzle: Daha fazlasını göstermek için w tuşuna basın.

Testimizin geçmesini istiyorsak, testi önceki durumuna değiştiririz veya anlık görüntü dosyasını güncelleriz. Komut satırında Jest, anlık görüntünün nasıl güncelleneceğine ilişkin talimat sağlar. Önce, daha fazlasını göstermek için komut satırında w tuşuna basın ve ardından anlık görüntüyü güncellemek için u tuşuna basın.

 › Press u to update failing snapshots.

Anlık görüntüyü güncellemek için u tuşuna bastığımızda test geçecektir.

Çözüm

Umarım bu eğitimde çalışmaktan zevk almışsınızdır. Enzim test kitaplığını kullanarak bazı Jest test teknikleri öğrendik. Ayrıca sizi bir test çalıştırma, React bileşenlerini test etme, alay etme ve anlık görüntü testi yapma süreciyle tanıştırdım. Herhangi bir sorunuz varsa, bunları aşağıdaki yorumlar bölümünde bırakabilirsiniz; her birini yanıtlamaktan ve sizinle herhangi bir sorun üzerinde çalışmaktan memnuniyet duyacağım.

Kaynaklar ve İleri Okuma

• jest belgeleri
• enzim belgeleri
• “React Bileşenleri Nasıl Test Edilir: Tam Kılavuz”, Mohammad Iqbal, freeCodeCamp
• “Jest ve Enzim ile Tepkinin Test Edilmesi”, Dominic Fraser, CodeClan