Yazma testleri sıkıcı ve tekrarlayıcı olabilir. Özellikler üzerinde çalışmak için kullanmayı tercih ettiğiniz değerli zamanınızı boşa harcadığınızı hissedebilirsiniz. Ancak, güvendiğiniz uygulamaları göndermek istiyorsanız, testler yazmalısınız.

Test etme, aksi takdirde kullanıcılara gönderebileceğiniz hataları ve hataları yakalamanıza olanak tanır. Bu nedenle, uygulamanızın kullanıcı deneyimini geliştirir ve sizi üretim kodunda hata ayıklama zahmetinden kurtarır.

Jest ve React Testing Library'yi kullanarak React'te kolayca testler yazabilirsiniz.

React'te Neleri Test Etmelisiniz?

Neyin test edileceğine karar vermek zor olabilir. Testler harika olsa da React uygulamanızdaki her satırı test etmemelisiniz. Bunu yapmak, uygulamanızdaki en ufak bir değişiklikle kırılan kırılgan testlerle sizi baş başa bırakacaktır.

Bunun yerine, yalnızca son kullanıcı uygulamasını test etmelisiniz. Bu, uygulamanızın iç işleyişini test etmek yerine son kullanıcının uygulamanızı nasıl kullanacağını test etmek anlamına gelir.

instagram viewer

Ayrıca, açılış sayfası veya oturum açma bileşeni gibi uygulamanızda en çok kullanılan bileşenleri test ettiğinizden emin olun. Ayrıca, uygulamanızdaki en önemli özellikleri test edin. Örneğin bunlar alışveriş sepeti özelliği gibi para kazandıran özellikler olabilir.

Neyi test edeceğinize karar verirken akılda tutulması gereken bir şey, React'in kendi kendine gerçekleştirdiği işlevselliği asla test etmemektir. Örneğin, propların geçerliliğini test etmek yerine React PropTypes kullanabilirsiniz.

Bir Düğme Bileşenini Test Etme

Bir bileşenin dahili çalışmalarını değil, yalnızca son kullanıcı uygulamasını test etmeniz gerektiğini unutmayın. Bir düğme bileşeni için bu, çökmeden işlendiğini ve doğru şekilde görüntülendiğini doğrulamak anlamına gelir.

içinde yeni bir dosya oluşturun. kaynak denilen klasör Button.js ve aşağıdaki kodu ekleyin.

işlevButon({değer}) {
dönüş (
<buton>{değer}</button>
 )
}
ihracatvarsayılan Buton

Button.js, value adlı bir prop'u kabul eder ve onu button değeri olarak kullanır.

İlk Testinizi Yazma

A oluştur-tepki-uygulama uygulaması Jest ve React Testing Library ile önceden yüklenmiş olarak gelir. Jest, yerleşik alay etme ve onaylama işlevlerine sahip hafif bir test kitaplığıdır. Birçok ile çalışır JavaScript çerçeveleri. React Testing Library ise, kullanıcıların bileşenlerle nasıl etkileşime girdiğini test etmenize yardımcı olacak işlevler sağlar.

adlı yeni bir dosya oluşturun. Button.test.js src klasöründe. Varsayılan olarak Jest, son eki olan dosyaları tanımlar. .test.js test dosyaları olarak ve bunları otomatik olarak çalıştırır. Başka bir seçenek de test dosyalarınızı __ adlı bir klasöre eklemektir.testler__.

İlk testi oluşturmak için Button.test.js'ye aşağıdaki kodu ekleyin.

içe aktarmak { render } itibaren '@test-kütüphane/tepki';
içe aktarmak Buton itibaren '../Buton';
betimlemek('Düğme bileşeni', () => { 
 Ölçek('Düğme bileşenini çökmeden işler', () => {
 render(<Düğme />);
 }); 
})

Bu test ilk olarak Jest tarafından sağlanan açıklama bloğunu kullanarak testin neyle ilgili olduğunu tanımlar. Bu blok, ilgili testleri gruplamak için kullanışlıdır. Burada, Düğme bileşeni için testleri gruplandırıyorsunuz.

Açıklama bloğunun içinde, test bloğundaki ilk teste sahipsiniz. Bu blok, testin ne yapması gerektiğini açıklayan bir dizeyi ve beklentiyi gerçekleştiren bir geri arama işlevini kabul eder.

Bu örnekte, testin Button bileşenini çökmeden işlemesi gerekir. React Testing Library'deki render yöntemi, asıl testi gerçekleştirir. Düğme bileşeninin doğru şekilde işlenip işlenmediğini kontrol eder. Varsa, test geçer, aksi takdirde başarısız olur.

Düğmeyi Bulmak için Rolleri Kullanma

Bazen elemanın monte edilip edilmediğini kontrol etmek istersiniz. Screen yönteminde, DOM'den bir öğe almak için kullanabileceğiniz bir getByRole() işlevi vardır.

screen.getByRole('buton')

Daha sonra, belgede var olup olmadığını veya doğru şekilde oluşturulup oluşturulmadığını kontrol etmek gibi testler yapmak için yakaladığınız öğeyi kullanabilirsiniz.

getByRole(), bir bileşendeki öğeleri seçmek için kullanabileceğiniz birçok sorgudan biridir. Diğer sorgu türlerine göz atın. React Test Kitaplığı “Hangi Sorguyu Kullanmalıyım” Kılavuzu. Ayrıca “düğme” rolü dışında, çoğu anlamsal HTML öğeleri sorgularınızı gerçekleştirmek için kullanabileceğiniz örtük rollere sahiptir. Rollerin listesini bulun MDN belgeleri.

Bileşen işlemelerini doğrulamak için aşağıdakini test bloğuna ekleyin.

Ölçek('Düğmeyi çökmeden işler', () => {
 render(<Düğme değeri="Üye olmak" />);
 bekle (screen.getByRole('buton')).toBeInTheDocument()
});

toBeInTheDocument() eşleştiricisi, düğme öğesinin belgede olup olmadığını kontrol eder.

Düğmenin Doğru Şekilde Oluşturulmasını Bekleyin

Button bileşeni bir prop değeri kabul eder ve bunu görüntüler. Doğru şekilde oluşturulabilmesi için gösterdiği değer, girdiğiniz değerle aynı olmalıdır.

Yeni bir test bloğu oluşturun ve aşağıdaki kodu ekleyin.

Ölçek('Düğmeyi doğru şekilde işler', () => {
 render(<Düğme değeri="Giriş yapmak" />);
 bekle (screen.getByRole('buton')).toHaveTextContent("Giriş yapmak")
})

React Testing Library'yi kullanırken testlerden sonra temizlik yapmanız gerekmediğini unutmayın. Geçmiş sürümlerde, temizliği şu şekilde manuel olarak yapmanız gerekir:

afterEach (temizleme)

Artık test kitaplığı, her oluşturmadan sonra bileşenlerin bağlantısını otomatik olarak kaldırır.

Anlık Görüntü Testleri Oluşturma

Şimdiye kadar Button bileşeninin davranışını test ettiniz. Bileşenin çıktısının aynı kalıp kalmadığını test etmek için anlık görüntü testleri yazın.

Anlık görüntü testleri, geçerli çıktıyı bileşenin depolanmış bir çıktısıyla karşılaştırır. Örneğin, bir Düğme bileşeninin stilini değiştirirseniz, anlık görüntü testi sizi bilgilendirecektir. Anlık görüntüyü değiştirilen bileşenle eşleşecek şekilde güncelleyebilir veya stil değişikliklerini geri alabilirsiniz.

Anlık görüntü testleri, kullanıcı arayüzünüzün beklenmedik bir şekilde değişmemesini sağlamak istediğinizde çok kullanışlıdır.

Anlık görüntü testi, anlık görüntüyü oluşturmak için halihazırda çalışan bir koda sahip olmanız gerektiğinden birim testlerinden farklıdır.

Reaksiyon-test-renderer npm paketindeki oluşturucu yöntemini kullanacaksınız. Bu nedenle, yüklemek için aşağıdaki kodu yürütün.

npm Yüklemek tepki-Ölçek-işleyici

Button.test.js'de anlık görüntü testini aşağıdaki gibi yazın:

Ölçek('Anlık görüntüyle eşleşir', () => {
 const ağaç = renderer.create(<Düğme değeri="Giriş yapmak" />).toJSON();
beklemek(ağaç).toMatchSnapshot();
})

Düğme bileşeni için mevcut anlık görüntü yok, bu nedenle bu testi çalıştırmak, test dosyasının yanında bir anlık görüntü dosyası oluşturacaktır:

Buton
└─── __testler__
│ │ Buton.testler.js
│ └─── __anlık görüntü__
│ │ Buton.Ölçek.js.patlatmak
│ 
└─── Buton.js

Şimdi, bir sonraki testi çalıştırdığınızda, React, oluşturduğu yeni anlık görüntüyü depolanmış olanla karşılaştıracaktır.

En Çok Kullanılan Bileşenler İçin Testler Yazma

Bu öğretici, bir Düğme bileşenini test ederek React'te DOM ve anlık görüntü testlerinin nasıl yazılacağını öğretti. Oluşturduğunuz tüm bileşenler için testler yazmak sıkıcı olabilir. Ancak bu testler, önceden konuşlandırılmış kodun hatalarını ayıklamak için harcayacağınız zamandan tasarruf etmenizi sağlar.

Yüzde 100 test kapsamı elde etmeniz gerekmez, ancak en çok kullandığınız ve en önemli bileşenleriniz için testler yazdığınızdan emin olun.