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 harcıyormuş gibi hissedebilirsiniz. Ancak, kendinize 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 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 bozulan hassas testlerle baş başa kalmanıza neden olur.

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.

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 alışveriş sepeti özelliği gibi para kazandıran özellikler bunlar olabilir.

Neyin test edileceğine karar verilirken akılda tutulması gereken bir şey, React’in kendi başına hallettiği işlevselliği asla test etmemek. Örneğin, donanımların geçerliliğini test etmek yerine React PropTypes kullanabilirsiniz.

Düğme Bileşenini Test Etme

Bir bileşenin dahili işleyişini 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şlediğini ve doğru şekilde görüntülendiğini doğrulamak anlamına gelir.

src klasöründe Button.js adlı yeni bir dosya oluşturun ve aşağıdaki kodu ekleyin.

function Button({value}) {

return (

<button>{value}</button>

)

}

export default Button

Button.js, value adlı bir pervaneyi kabul eder ve onu düğme değeri olarak kullanır.

İlk Testinizi Yazmak

Bir uygulama oluştur-tepki-uygulaması , Jest ve React Testing Library ile önceden yüklenmiş olarak gelir. Jest, yerleşik alay ve iddia işlevlerine sahip hafif bir test kitaplığıdır. Birçok JavaScript çerçevesiyle çalışır . 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.

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

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

import { render } from ‘@testing-library/react’;

import Button from ‘../Button’;

describe(‘Button component’, () => {

test(‘Renders the button component without crashing’, () => {

render(<Button />);

});

})

Bu test, öncelikle Jest tarafından sağlanan açıklama bloğunu kullanarak testin ne hakkında olduğunu tanımlar. Bu blok, ilgili testleri gruplandırmak için kullanışlıdır. Burada, Button 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 yürüten bir geri çağırma işlevini kabul eder.

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

Düğmeyi Bulmak İçin Rolleri Kullanma

Bazen elemanın monte edilip edilmediğini kontrol etmek istersiniz. screen yöntemi, DOM’dan bir öğe almak için kullanabileceğiniz bir getByRole() işlevine sahiptir.

screen.getByRole(‘button’)

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

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

Bileşenin işlendiğini doğrulamak için aşağıdakileri test bloğuna ekleyin.

test(‘Renders button without crashing’, () => {

render(<Button value=”Sign up” />);

expect(screen.getByRole(‘button’)).toBeInTheDocument()

});

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

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

Button bileşeni bir prop değerini kabul eder ve onu görüntüler. Doğru bir şekilde işleyebilmesi için, gösterdiği değerin girdiğiniz değerle aynı olması gerekir.

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

test(‘Renders button correctly’, () => {

render(<Button value=”Login” />);

expect(screen.getByRole(‘button’)).toHaveTextContent(“Login”)

})

React Testing Library kullanırken testlerden sonra temizlik yapmanız gerekmediğini unutmayın. Önceki sürümlerde, temizliği şu şekilde manuel olarak yapmanız gerekirdi:

afterEach(cleanup)

Artık test kitaplığı, her işlemeden sonra bileşenleri otomatik olarak ayırıyor.

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

Şimdiye kadar Button bileşeninin davranışını test ettiniz. Bileşen çı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 depolanan çıktısıyla karşılaştırır. Örneğin, bir Button bileşeninin stilini değiştirirseniz, anlık görüntü testi sizi bilgilendirir. 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ı arabiriminizin beklenmedik bir şekilde değişmemesini sağlamak istediğinizde çok kullanışlıdır.

Anlık görüntü testi, birim testlerinden farklıdır, çünkü anlık görüntüyü oluşturmak için zaten çalışan bir koda sahip olmanız gerekir.

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

npm install react-test-renderer

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

test(‘Matches snapshot’, () => {

const tree = renderer.create(<Button value=”Login” />).toJSON();

expect(tree).toMatchSnapshot();

})

Button 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:

Button

└─── __tests__

│ │ Button.tests.js

│ └─── __snapshot__

│ │ Button.test.js.snap

│

└─── Button.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 Test Yazma

Bu eğitim size, bir Button 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 size zaten dağıtılan kodda hata ayıklamak için harcayacağınız zamandan kazandırır.

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