React Test için Jest Nasıl Kurulur?

Giderek daha fazla sayıda geliştirici React'i kendi ön uç çerçevesi olarak benimsedikçe, yazdığımız kodun en yüksek kalitede olmasını sağlamak giderek daha önemli hale geliyor. Kalite güvencesinin önemli bir yönü test etmektir ve Jest, genellikle React ile birlikte kullanılan popüler bir test çerçevesidir.

Jest, Facebook tarafından oluşturulmuş açık kaynaklı bir test çerçevesidir ve JavaScript kodunuzu mümkün olduğunca kolay ve verimli bir şekilde test etmek için tasarlanmıştır. Hızlıdır, kullanımı kolay bir API'ye sahiptir ve testi kolaylaştıran bir dizi yerleşik özellikle birlikte gelir.

Bu yazıda, React testi için Jest'i kurma sürecinde size rehberlik edeceğiz. Jest'i kurmaktan ilk test senaryonuzu yazmaya kadar, başlamak için bilmeniz gereken her şeyi ele alacağız.

Tepki Testi İçin Şaka

Jest, React uygulamalarını test etmek için kullanılan popüler bir test çerçevesidir. Facebook tarafından oluşturulmuştur ve kullanım kolaylığı ve hızlı kurulum süresi ile bilinir. Jest, kutudan çıkar çıkmaz React ile çalışacak şekilde tasarlanmıştır ve testi kolaylaştırmak için birçok özellik sunar.

Jest'i React uygulamalarını test etmek için popüler bir seçenek haline getiren özelliklerden bazıları şunlardır:

i) Anlık görüntü testi: Jest, bir bileşenin mevcut çıktısını önceden depolanmış bir anlık görüntüyle karşılaştırmanıza olanak tanıyan bir anlık görüntü testi özelliği sağlar. Bu, bileşenin çıktısında herhangi bir istenmeyen değişikliğin yapılıp yapılmadığını kontrol etmeyi kolaylaştırır.

ii) Mocking: Jest, sahte işlevler ve modüller oluşturmanıza izin veren yerleşik alay yetenekleri sağlar. Bu, hazır olmayan veya test edilmesi zor olan bir işlev veya modülün davranışını simüle etmeniz gerektiğinde kullanışlıdır.

iii) Kod kapsamı: Jest, testlerinizin kapsadığı kod yüzdesini gösteren bir kod kapsamı raporu sağlar. Bu, kodunuzun test edilmemiş ve ek dikkat gerektirebilecek alanlarını belirlemek için kullanışlıdır.

iv) Eşzamansız test: Jest, eşzamansız kodu yönetmek için yardımcı programlar sağlayarak eşzamansız kodu test etmeyi kolaylaştırır. Bu, iddialarda bulunmadan önce vaatlerin veya diğer zaman uyumsuz kodların çözülmesini bekleyen testler yazmanıza olanak tanır.

v) Kolay kurulum: Jest'in React uygulamanız için kurulumu ve yapılandırılması kolaydır. Kutudan çıkar çıkmaz çalışan, ancak özel ihtiyaçlarınıza uyacak şekilde özelleştirilebilen varsayılan bir yapılandırmayla birlikte gelir.

Genel olarak Jest, React uygulamalarını test etmeyi kolaylaştıran güçlü ve esnek bir test çerçevesidir. Pek çok özelliği ve kolay kurulumu, onu React bileşenleri için güvenilir testler yazmak isteyen geliştiriciler için popüler bir seçim haline getiriyor.

Jest'i Tepki Testi İçin Ayarlama

2023'te Jest for React testini kurmak için izlemeniz gereken belirli adımlar var.

1) Jest'i yükleyin

Jest, projenize npm veya yarn kullanılarak kurulabilir. Jest'i npm kullanarak kurma adımları şunlardır:

i) Terminalinizi veya komut isteminizi açın ve proje dizininize gidin.

ii) Jest'i projenizde bir geliştirme bağımlılığı olarak kurmak için aşağıdaki komutu çalıştırın:

npm install –save-dev jest

Bu komut, Jest'i kuracak ve devDependencies bölümü altındaki projenizin package.json dosyasına ekleyecektir.

Kurulum tamamlandıktan sonra testlerinizi Jest kullanarak yazmaya başlayabilirsiniz. Testlerinizi npm test komutunu kullanarak çalıştırabilirsiniz. Jest varsayılan olarak .test.js veya .spec.js uzantılı test dosyalarını arar. Ancak, Jest yapılandırma dosyanızdaki testMatch özelliğini değiştirerek Jest'i diğer uzantılara sahip testleri arayacak şekilde yapılandırabilirsiniz.

Bu kadar! Artık projenize Jest yüklediniz ve uygulamanız için testler yazmaya başlayabilirsiniz.

2) Bir Yapılandırma Dosyası Oluşturun

Jest için bir yapılandırma dosyası oluşturmak için projenizin kök dizininde jest.config.js adlı bir dosya oluşturabilirsiniz. Bu dosya, Jest'in testleri çalıştırırken kullanması gereken yapılandırma seçeneklerini içerecektir.

İşte bir örnek yapılandırma dosyası:

modül.ihracat = {

// Hangi dosya türlerinin test dosyası olarak kabul edilmesi gerektiğini belirtir.

testMatch: [

'**/__tests__/**/*.js?(x)',

'**/?(*.)+(belirtim|test).js?(x)'

],

// Jest'in içindeki dosyaları aramak için kullanması gereken dizin yollarının listesi.

kökler: ['<rootDir>/src'],

// Normal ifadelerden dönüştürücülere giden yollara bir harita.

dönüşüm: {

'^.+\\.(js|jsx|ts|tsx)$': 'babil şakası'

},

// Jest'in test dosyalarını algılamak için kullandığı glob kalıpları.

testPathIgnorePatterns: [

'<rootDir>/node_modules/',

"<rootDir>/build/"

],

// Jest'in kapsam raporları yazarken kullandığı muhabir adlarının listesi.

coverageReporters: ['json', 'metin', 'html'],

// Modüllerinizin kullandığı bir dizi dosya uzantısı.

modülDosya Uzantıları: ['js', 'json', 'jsx']

};

Bu örnek yapılandırma dosyası aşağıdaki seçenekleri belirtir:

a) testMatch: Test dosyalarını tanımlamak için kullanılan modeli belirtir.

b) kökler: Jest'in dosya araması gereken dizinleri belirtir.

c) transform: Testleri çalıştırmadan önce Jest'in dosyalara uygulaması gereken dönüşümleri belirtir.

d) testPathIgnorePatterns: Test dosyalarını ararken göz ardı edilecek kalıpları belirtir.

e) kapsama Raporlayıcıları: Jest'in kapsam raporları oluşturmak için kullanması gereken raporlayıcıları belirtir.

f) moduleFileExtensions: Jest'in dosyaları ararken araması gereken dosya uzantılarını belirtir.

Bu konfigürasyon dosyasını projenizin ihtiyaçlarına göre değiştirebilirsiniz. Yapılandırma dosyanızı oluşturduktan sonra Jest, projenizde testler çalıştırırken bunu otomatik olarak kullanacaktır.

3) Testlerinizi Yazın

Jest'i yükledikten ve yapılandırma dosyanızı kurduktan sonra, React uygulamanız için testler yazmaya başlayabilirsiniz. Bir test dosyası oluşturma ve bir test yazma adımları şunlardır:

i) .test.js veya .spec.js uzantılı yeni bir dosya oluşturun. Bu sizin test dosyanız olacak.

ii) Test dosyasında, test etmek istediğiniz bileşeni veya işlevi içe aktarın:

'./myFunctions'dan { toplam } içe aktarın;

iii) Testinizi yazın. Test, bileşen veya işlevin beklendiği gibi davrandığını kontrol etmek için Jest API'sini kullanan bir işlevdir:

tarif('toplam', () => {

test('1 + 2'yi 3'e eşitler', () => {

wait(toplam(1, 2)).toBe(3);

});

});

Bu örnekte, iki sayıyı toplayan basit bir toplama işlevini test ediyoruz. Tanımlama işlevi, ilgili testleri birlikte gruplandırırken, test işlevi tek bir test durumunu belirtir. bekleme işlevi, toplam işlevinin beklenen değeri döndürüp döndürmediğini kontrol eder.

iv) Proje dizininizde npm test komutunu yürüterek testlerinizi çalıştırın. Jest, projenizdeki test dosyalarını arayacak ve bulduğu testleri yürütecektir.

Bileşeninizin veya işlevinizin tüm işlevlerini kapsamak için ihtiyaç duyduğunuz kadar çok test ekleyebilirsiniz. Jest, daha karmaşık testler oluşturmak için kullanabileceğiniz çok çeşitli eşleştirmeler ve diğer yardımcı programlar sağlar.

React uygulamanız için testler yazarak, kodunuzun beklendiği gibi çalıştığından emin olabilir ve kod tabanınızda değişiklik yaparken regresyonlardan kaçınabilirsiniz.

4) Testlerinizi Yapın

Testlerinizi Jest kullanarak çalıştırmak için proje dizininizdeki npm test komutunu kullanabilirsiniz. Jest, projenizde Jest yapılandırma dosyanızda belirtilen modelle eşleşen tüm test dosyalarını otomatik olarak algılar ve çalıştırır.

npm testini çalıştırdığınızda, Jest konsoldaki testlerinizin sonuçlarını verecektir. Tüm testler başarılı olursa, Jest test sonuçlarının bir özetini görüntüler:

PASS src/components/Example.test.js

✓ çökmeden işler (21ms)

Test Takımları: 1 geçti, toplam 1

Testler: 1 geçti, toplam 1

Anlık görüntüler: toplam 0

Süre: 3.204 sn, tahmini 4 sn

Tüm test takımlarını çalıştırdı.

Herhangi bir test başarısız olursa, Jest, başarısızlığı ve başarısız olan testin yerini açıklayan bir hata mesajı görüntüler:

FAIL src/components/Example.test.js

• Örnek bileşen › çökmeden işler

TypeError: Tanımsız özelliğin 'harita' özelliği okunamıyor

10 | render() {

11 | const { öğeler } = this.props;

> 12 | return items.map(item => <div key={item.id}>{item.name}</div>);

| ^

13 | }

14 | }

15 |

Example.render'da (src/components/Example.js:12:17)

ReactTestRenderer.render'da (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:1052:32)

at Object.<anonymous> (src/components/Example.test.js:9:16)

Test Takımları: 1 başarısız, toplam 1

Testler: 1 başarısız, toplam 1

Anlık görüntüler: toplam 0

Süre: 3,537 saniye, tahmini 4 saniye

Tüm test takımlarını çalıştırdı.

Jest ayrıca, testleri izleme modunda çalıştırma, kod kapsamı raporları oluşturma ve daha fazlası gibi testlerinizin davranışını özelleştirmek için kullanabileceğiniz bir dizi seçenek sunar. Bu seçenekler hakkında daha fazla bilgiyi Jest belgelerinde bulabilirsiniz.

Sarma

LambdaTest, React uygulamalarını test etmek için Jest ile birlikte kullanılabilen güçlü bir bulut tabanlı test platformudur. LambdaTest'in bulut tabanlı altyapısının ölçeklenebilirliğinden yararlanarak, Jest testlerinizi çok çeşitli tarayıcılarda ve cihazlarda hızlı ve verimli bir şekilde çalıştırabilir ve uygulamanızın farklı ortamlarda beklendiği gibi çalışmasını sağlayabilirsiniz.

Bu blogda, React uygulamalarını test etmek için Jest'i kurmak için gereken adımları ele aldık. Ayrıca Jest'i LambdaTest'i bir test ortamı olarak kullanacak, Jest kullanarak testler yazacak ve testleri LambdaTest'in bulut tabanlı altyapısında yürütecek şekilde nasıl yapılandıracağımızı öğrendik.

LambdaTest ve Jest'i birlikte kullanmak, React geliştiricileri için geliştirme döngüsünün başlarında gerilemeleri ve hataları yakalamalarına yardımcı olabilecek ve uygulamalarının genel kalitesini iyileştirebilecek sağlam bir test çözümü sağlar.

Bu nedenle, React test iş akışınızı kolaylaştırmak istiyorsanız, React uygulamalarınız için kapsamlı, ölçeklenebilir ve verimli testler elde etmek için LambdaTest ve Jest'i birlikte kullanmayı düşünün.