Menü

Jest Framework Kullanarak React Uygulamaları Nasıl Test Edilir

  • Ana
  • Diğer
  • Jest Framework Kullanarak React Uygulamaları Nasıl Test Edilir

how test react apps using jest framework

Sorunları Ortadan Kaldırmak Için Enstrümanımızı Deneyin

Bu eğitim videosunda, Jest kullanarak bir React Uygulaması oluşturmayı ve test etmeyi, Jest kullanarak alay etmeyi ve Jest spyOn komutunu kullanarak Casusluk işlevlerini öğreneceğiz:

KİME Jest'in Tam Tanıtımı önceki eğitimimizde verildi. Bu eğitimde, React tabanlı uygulamaları test etmek için Jest'in nasıl kullanılacağını göreceğiz.

Basit bir kullanarak önyüklemeli bir React uygulaması oluşturmayı öğreneceğiz. Deniz seviyesinden yukarıda komuta dayalı ve Jest tepki testlerini yazmak için aynı uygulamayı kullanın. Ayrıca anlık görüntü testi kavramını keşfedeceğiz ve Jest çerçevesi ve Jest spyon komutunu kullanarak React bileşenleriyle nasıl alay edebileceğinizi ve casusluk yapabileceğinizi öğreneceğiz.

React Uygulamalarını ve Jest alaylarını ve casuslarını test etme

Ne öğreneceksin:

React - Başlarken

Jest, diğer tüm JavaScript çerçevelerinin desteğiyle birlikte React uygulamalarını kapsamlı bir şekilde test etmek için oluşturulmuştur.

Jest çerçevesi ve testleri eklemek için React uygulamasını kullanacağımızdan, React uygulamaları hakkında temel bir anlayışa sahip olmak zorunludur ve gerçekten de bir önkoşuldur.

Temel bir React uygulamasına başlamak için lütfen aşağıdaki adımları izleyin:

# 1) Bir React uygulaması oluşturmak için, basitçe bir düğüm paketi yürütücüsü (yani npm ile birlikte gelen npx) kullanabilir ve aşağıdaki komutu çalıştırabilirsiniz.

npx create-react-app my-app

#iki) Yukarıdaki komut tamamlandığında, uygulama my-app projesini istediğiniz herhangi bir düzenleyicide açın - ücretsiz olarak kullanılabilen Visual Studio Code önerilir.

# 3) Terminal / komut penceresinde (editörün içinde), aşağıdaki komutu kullanarak projeyi çalıştırın.

npm start

# 4) Proje derlendiğinde, http: // localhost: 3000 URL'si ile yeni bir tarayıcı sekmesi açacaktır.

# 5) Ayrıca, lütfen Jest ile ilgili tüm bağımlılıkların, yukarıda bahsedilen npx komutu kullanılarak oluşturulan React projesinin bir parçası olarak yüklendiğini unutmayın.

# 6) Proje ayrıca, Jest için birçok yararlı özel DOM öğesi eşleştiriciye sahip jest-dom adlı bir React test Kitaplığı içerir. (Kontrol İşte React kavramları hakkında daha fazla ayrıntı için)

Anlık Görüntü Testi Var

Anlık görüntü testi, Jest kitaplığını kullanarak React bileşen anlık görüntülerini test etmek için çok kullanışlı bir tekniktir.

İlk önce hangi anlık görüntü testini anlamaya çalışalım esasen anlamına gelir.

Anlık görüntü, herhangi bir şeyin zaman noktasının temsilinden başka bir şey değildir. Örneğin, bir ekran görüntüsü, bir kamera resmi, vb., bir an için herhangi bir şeyin ayrıntılarını temsil eden anlık görüntülerdir.

React perspektifinden Anlık Görüntü, sağlanan durum ve davranışa sahip bir React bileşeninin zaman noktası temsilinden veya çıktısından başka bir şey değildir.

Bu, aşağıdaki adımlar kullanılarak basit bir örnekle açıklanmaktadır.

# 1) Anlık görüntü testine başlamak için aşağıdaki komutu kullanarak npm paketini 'react-test-renderer' ekleyin.

npm i react-test-renderer

#iki) Şimdi, test edilen uygulamamız olacak basit bir React bileşeni oluşturalım. Bu bileşen, sınıf değişkenleri ve sayfa özellikleri şeklinde basit bir duruma sahip olacaktır.

Bileşen aşağıda gösterildiği gibi görünecektir. Bu bileşeni Link olarak adlandıralım (ve böylece karşılık gelen react bileşen dosya adı Link.react.js olacaktır)

import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.page} {this.state.welcomeMessage} ); } }

Şu anda, dosya yapısı React projesini bu şekilde arayacaktır.

React projesi için dosya yapısı

# 3) Bu bileşen için bir anlık görüntü testi ekleyelim.

için) Anlık görüntü testine başlamak için - react-test-oluşturucu Düğüm paketi bir ön koşuldur. Yüklemek react-node-oluşturucu aşağıdaki komutu kullanarak.

npm i react-test-renderer

b) Bu yeni bileşen için testler eklemek için yeni bir dosya ekleyin. Şöyle adlandıralım Link.test.js

c) Şimdi bir anlık görüntü testi ekleyin. Burada, önce React bileşenini işleyerek bir anlık görüntü oluşturacağız.

Test aşağıda gösterildiği gibi görünecektir.

import React from 'react'; import Link from './Link.react' import renderer from 'react-test-renderer'; it('renders correctly', () => { const tree = renderer .create() .toJSON(); console.log(tree) expect(tree).toMatchSnapshot(); });

Burada testte, işlenmiş bileşenin JSON temsilini oluşturuyoruz. 'Sayfa' mülkünün değerini 'www.softwaretestinghelp.com' olarak aktardık

d) Anlık görüntü testi çalıştırıldığında - bileşenin bir anlık görüntü dosyası oluşturulur ( .snap ) ve sonraki test yürütmeleri sırasında yeniden kullanılan proje dizinine kaydedilir.

Bu durumda, test sırasında sağlanan page özelliğine sahip bir anlık görüntü dosyası kullanılacaktır. 'Npm test' komutunu kullanarak testi çalıştırdıktan sonra oluşturulan anlık görüntü dosyasını görelim.

dır-dir) Proje src dizininde '__snapshots__' adlı bir dizin altında bir anlık görüntü dosyası oluşturulur.

tüm e-posta siteleri neler

Aşağıda bunun için proje yapısı verilmiştir.

Yukarıdaki ekran görüntüsündeki '__snapshots__' dizini, test ilk kez çalıştırıldığında proje kök dizininde oluşturulur.

f) Anlık görüntü dosyasının nasıl görüneceğini görelim.

Dosya aç - Link.test.js.snap

Anlık görüntü dosyası

g) Yukarıda, verilen bileşen için saklanan anlık görüntü gösterilmektedir.

h) Şimdi, örneğin, yukarıdaki bileşenin uygulanması değişir. Örneğin, özellik sayfasının adını bileşendeki bir site olarak değiştirelim ve testi tekrar çalıştırmayı deneyelim.

Bileşen bu şekilde değiştirilir (page adlı özelliği site adında yeni bir mülk olarak değiştirdik).

import React from 'react'; export default class Link extends React.Component { constructor() { super(); this.state = { class: 'normal', welcomeMessage: 'Hi there!' }; } render() { return ( {this.props.site} {this.state.welcomeMessage} ); } }

Şimdi testleri tekrar çalıştırmayı deneyelim. Proje dizininde halihazırda anlık görüntülere sahip olduğumuzdan, testimizin bu senaryoda başarısız olması beklenmektedir - Bileşen kodu değiştiğinden ve eski anlık görüntü eşleşmesi bir başarısızlık olacaktır.

Testi çalıştırırken elde ettiğimiz sonuç aşağıda verilmiştir:

Bileşen kodu değişti

(ben) Şimdi, bu değişikliklerin gerekli değişiklikler olduğunu ve testlerimizin eski anlık görüntüyü güncellemesini gerektirdiğini varsayalım. Bu durumda, eski anlık görüntünün üzerine yazacak ve bileşenin kendisindeki yeni değişikliklere göre yeni bir tane oluşturacak güncelleme komutuyla testleri çalıştırın.

Komutu Çalıştır

yarn test -u

(j) Yukarıdaki komut ve güncellenmiş iddia ile testin geçtiğini göreceksiniz.

Bu nedenle, genel Anlık Görüntü Testi, tüm bileşeni nihai görünüme göre test etmek ve eski sonucu bir anlık görüntü olarak saklamak için yararlı bir tekniktir; bu, kod değişiklikleri veya özelliklerinin veya bu nedenle herhangi bir yeniden düzenleme işleminin bir sonucu olarak hiçbir gerileme sorununun ortaya çıkmamasını sağlar. mevcut bileşene.

Video Eğitimi: Anlık Görüntü Testi Var

Orada Kullanarak Alay Etmek

Bu bölümde Jest örneklerini nasıl kullanabileceğimizi göreceğiz. Örnekler, aşağıda gösterildiği gibi çeşitli şekillerde kullanılabilir.

Örneğin,

  1. Tüm React Bileşeniyle dalga geçmek
  2. Tekli veya çoklu işlevlerle dalga geçmek - Bu, herhangi bir Javascript geliştirme çerçevesine özgü değildir. Jest, herhangi bir belirli çerçeveye özgü olmayan bir javascript test kitaplığı olduğundan, işlevler içeren düz, eski bir Javascript dosyasıyla dalga geçmek için Jest'i bile kullanabiliriz.
  3. İşlevler veya Javascript kodu içinde kullanılan alaycı API çağrıları - Üçüncü taraf entegrasyonundan gelen yanıtlarla alay etmek için Jest'i kullanabiliriz.

Bu alay yöntemlerinin her birini ayrıntılı olarak tartışalım.

Mocking React Bileşenleri

React Uygulaması, birbirine bağlı birden fazla bileşenden oluşur. Basit bir anlayış için, React Component'i sunum ve mantığa sahip bir sınıf olarak düşünün.

Nesneye Yönelik Programlama kullanılarak oluşturulan herhangi bir karmaşık sistem gibi, birden çok sınıftan oluşur, benzer şekilde, React Uygulaması bir bileşen koleksiyonudur.

Şimdi, bir bileşeni test ettiğimizde, onu test etmeyi etkileyen hiçbir bağımlılık olmadığından emin olmak isteriz, yani test edilen bileşenin bağlı olduğu 2 bileşen varsa, o zaman bağımlı bileşenlerle alay etme yolumuz varsa, daha sonra test edilen bileşeni daha eksiksiz bir şekilde birim test edebiliriz.

Bunu aşağıdaki şeklin yardımıyla anlamaya çalışalım:

Mocking React Bileşenleri

Burada, Bileşen 2 ve 3'e bağlı olan Bileşen1'e sahibiz.

Birim Bileşen1'i test ederken, Bileşen2 ve Bileşen3'ü Jest Mock'ları kullanarak sahte veya alay edilmiş emsalleriyle değiştirebiliriz.

Bu taklitleri nasıl kurabileceğimize bakalım. Bir div içine yerleştirilmiş bir Html metni olan basit Bileşenler kullanacağız. İlk olarak, bağımlı bileşenlerin kodunu göreceğiz - Bileşen2 ve Bileşen3 .

import React, { Component} from 'react' class Component2 extends Component { render() { return( Hello Component2 ) } } export default Component2 import React, { Component} from 'react' class Component3 extends Component { render() { return( Hello Component3 ) } } export default Component3

Şimdi, bağımlı Bileşenlere sahip Bileşen1'in nasıl görüneceğini görelim. Burada, bağımlı bileşenleri içe aktardığımızı ve bunları sırasıyla & gibi basit bir HTML etiketi olarak kullandığımızı görebilirsiniz.

import React, { Component} from 'react' import Component2 from './component2' import Component3 from './component3' class Component1 extends Component { render() { return( Hello Component1 ) } } export default Component1

Şimdi bu bileşen için nasıl testler yazabileceğimize bakalım. Bir test oluşturmak için, 'src' dizininde bir 'testler' klasörü oluşturun. Bu sadece proje rehberimizin temiz ve düzenli kalmasını sağlamak içindir.

import React, {Component} from 'react' import {render, container} from '@testing-library/react' import Component1 from '../components/component1' // arrange - mock setup jest.mock('../components/component2', () => () => Hello Mock Component2 ) jest.mock('../components/component3', () => () => Hello Mock Component3 ) describe('mock component tests', () => { test('mocked components in react', () => { // act const {container} = render() // assert console.log(container.outerHTML) const mockComponent2 = container.querySelector('div#mockComponent2') const mockComponent3 = container.querySelector('div#mockComponent3') expect(mockComponent2).toBeInTheDocument() expect(mockComponent3).toBeInTheDocument() }) })

Yukarıdaki test dosyasında, işlevi kullanarak Bileşenler1 ve 2 ile alay ettiğimizi görebilirsiniz. is.mock

jest.mock('../components/component2', () => () => Hello Mock Component2 )

Bu kurulum, Bileşen2'nin tüm çağrılarını bu sahte temsil ile değiştirecektir. Bu nedenle, testte Bileşen1'i işlediğimizde, Bileşen2'nin sahte sürümünü çağırır; bu, belgede Mock div öğelerinin bulunup bulunmadığını kontrol ederek de ileri sürdü.

Burada 'toBeInTheDocument () eşleştiricisini kullandık. Bu eşleştirici, React'e Özgüdür, çünkü React uygulamalarının nihai render çıktısı HTML kodundan başka bir şey değildir. Bu nedenle, bu eşleştirici, verilen HTML Elemanının React tarafından oluşturulan HTML belgesinde bulunmasını arar.

Eğitim Videosu: Jest - Mock React Components

Jest Kullanarak Alay İşlevleri

Şimdi, belirli bir JavaScript dosyası için belirli bir işlevle dalga geçmek için Jest örneklerini nasıl kullanabileceğimize bakalım.

Jest kullanarak alay etme işlevleri

Yukarıdaki şekilde, fonksiyon1'in bağımlılığı olan fonksiyon 2'yi, fonksiyon 2'nin stubbed / alaylı bir versiyonu ile değiştirdiğimizi görebilirsiniz.

Önce test edilen bir uygulama olarak hizmet verecek bir test JavaScript dosyası oluşturacağız ve alay işlevi kavramını göstermek için orada bazı yöntemlerle alay edeceğiz.

function getFullName(firstname, lastname) { return firstname + ' ' + lastname } function greet(firstname, lastname) { return 'Hello! ' + this.getFullName(firstname,lastname) } module.exports = {getFullName, greet}

Burada 2 fonksiyonumuz var, yani greet () ve getFullName (). Greet () işlevi tam adı elde etmek için getFullName () kullanır. Greet () yöntemini test ederken getFullName () işlevini alay uygulamasıyla nasıl değiştirebileceğimizi göreceğiz.

Jest mock işlevini kullanarak bu davranışla dalga geçmek için basit bir test yazalım ve alay edilen işlevin çağrılıp çağrılmadığını nasıl doğrulayabileceğimizi görelim.

test('illustrate mocks', () => { // arrange const mock = jest.fn().mockReturnValue('mocked name') const greeter = require('../app.js') greeter.getFullName = mock // act const result = greeter.greet('aman', 'kumar') // assert expect(result).toBe('Hello! mocked name') expect(mock).toHaveBeenCalled() expect(mock).toHaveBeenCalledTimes(1) expect(mock).toHaveBeenCalledWith('aman','kumar') })

Burada, bir Jest mock işlevi tanımladık ve işlev çağrıldığında döndürülecek olan 'alay edilen ad' olarak bir dönüş değeri ayarladık.

const mock = jest.fn().mockReturnValue('mocked name')

Ayrıca, taklidin çağrıldığını doğrulamak için Jest eşleştiricilerini aşağıda gösterildiği gibi kullanabiliriz.

  • toHaveBeenCalled () - Sahte çağırılıp çağrılmadığını doğrular.
  • toHaveBeenCalledWith (arg1, arg2) - Modelin verilen bağımsız değişkenlerle çağrılıp çağrılmadığını doğrular.
  • toHaveBeenCalledTimes (n) - Mock'un kaç kez çağrılacağını doğrular.

Jest'in Spy adlı başka bir özelliği daha var.

Öyleyse Casus nedir ve taklitlerden ne açıdan farklıdır?

Çoğu zaman, Spies gerçek işlev çağrısına izin verir, ancak yöntemi çağırmak için hangi argümanların kullanıldığı gibi şeyleri doğrulamak için ve ayrıca yöntem çağrısının gerçekleşip gerçekleşmediğini belirlemek için kullanılabilir.

Jest'te casusluk yapmak şu yolla yapılabilir: SpyOn var komut. Jest spyOn, argümanları nesne ve casusluk yapılacak asıl işlev olarak alır, yani aslında test edilen işlevi çağırır ve bir ara engelleyici olarak hareket eder.

kayıt defteri hatalarını düzeltmek Windows 10 ücretsiz
test('illustrate spy', () => { // arrange const greeter = require('../app.js') const getFullNameSpy = jest.spyOn(greeter, 'getFullName') // act const result = greeter.greet('aman', 'kumar') // assert expect(getFullNameSpy).toHaveBeenCalled() expect(result).toBe('Hello! aman kumar') expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar') })

Dolayısıyla, yukarıdaki kodda şunu gözlemleyebilirsiniz:

(ben) Aşağıdaki komutu kullanarak 'getFullName' yöntemi hakkında bir casus oluşturduk.

const getFullNameSpy = jest.spyOn(greeter, 'getFullName')

(ii) İddialarda, casusun beklenen argümanlarla çağrıldığını doğruluyoruz.

expect(getFullNameSpy).toHaveBeenCalled() expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar')

Jest spyOn komutu, aşağıdaki komut kullanılarak gerçek işlev yerine çağrılması gereken bir sahte uygulama belirtmek için de kullanılabilir.

const getFullNameSpy = jest.spyOn(greeter, 'getFullName').mockImplementation()

Bu durumda, gerçek işlev çağrısı, casus ile kurulan sahte bir uygulama ile değiştirilir.

Video Eğitimi: Jest- Mock Api İşlevleri

Jest Kullanarak Harici API Çağrılarını Taklit Etme

Aşağıdaki şekilde, function1'in harici bir API uç noktasına çağrı yaptığını görebilirsiniz. Örneğin - başarı veya başarısızlık yanıtı veren bir ödeme ortağı uç noktasını aramak.

Şimdi, bu işlev için birim testleri yazarken, testler her çalıştırıldığında harici uç noktayı çağırmayı bekleyemeyiz.

Testte harici uç noktaları çağırmaktan kaçınmanızın birkaç nedeni vardır.

  • Maliyet içerebilir.
  • Tepkisi kontrol edilemez. Her zaman beklenen tüm yanıtları ve hata kodlarını test edemezsiniz.
  • Her zaman mevcut olmayabilir - harici uç nokta mevcut değilse, test sonuçları kesintili olacaktır.

Jest kullanarak Harici API çağrılarını taklit etme

Tüm bu nedenlerden ötürü, harici uç noktanın davranışını kontrol edip saplayabilmemiz ve fonksiyonumuz için sağlam birim testleri oluşturmamız çok faydalı olacaktır.

Jest çerçevesini kullanarak alaycı API çağrılarını nasıl elde edebileceğimize bakalım. Axios, aşağıdaki komut kullanılarak indirilebilen / projeye eklenebilen bir NPM modülüdür.

npm install --save-dev axios

Aşağıda gösterildiği gibi, test işlevimizde API çağrıları yapmak için 'axios' modülünü kullanacağız.

function getUserData() { axios.get('https://reqres.in/api/users/2') .then(response => console.log(response.data)) .catch(error => console.log(error)); }

Sahte veriler ve günlüğe kaydetme başarı ve hata yanıtı veren sahte bir harici uç noktaya ulaşıyoruz.
Şimdi, birim testimizde, aksiyos modülüyle alay edeceğiz ve işlev bu harici uç noktayı çağırdığında sahte veya alay edilmiş bir yanıt döndüreceğiz.

Test kodu aşağıda gösterildiği gibi görünecektir.

const axios = require('axios') jest.mock('axios'); describe('mock api calls', () => { test('mocking external endpoint in axios', () => { // arrange const mockedResponse = {data: {username:'test-user', address:'India'}} axios.get.mockResolvedValue(mockedResponse) const app = require('../app.js') // act app.getUserData() // asserts expect(axios.get).toHaveBeenCalled() expect(axios.get).toHaveBeenCalledWith('https://reqres.in/api/users/2') }) })

Burada, burada tüm 'aksiyolar' modülüyle alay ettiğimizi anlamak önemlidir, yani test yürütme sırasında Axios modülüne giden herhangi bir çağrı, alay edilen uygulamaya gidecek ve testte yapılandırıldığı gibi bir yanıt döndürecektir.

Modül, aşağıdaki komut kullanılarak alay edilir.

const axios = require('axios') jest.mock('axios');

Aşağıdaki komutu kullanarak taklidi yapılandırdık.

axios.get.mockResolvedValue(mockedResponse)

Bu şekilde, harici API uç noktalarından gelen yanıtlarla alay edebiliriz. Burada bir 'GET' uç noktası kullandık, ancak aynı yaklaşım POST, PUT vb. Gibi diğer uç noktalar için de kullanılabilir.

Eğitim Videosu: Jest - Mock Api Uç Noktaları

Sonuç

Bu eğitimde, basit bir React Uygulamasının nasıl oluşturulacağını öğrendik ve Jest React'in, React bileşenlerinde Snapshot testleri gerçekleştirmek ve bir bütün olarak React Components alay etmek için nasıl kullanılabileceğini gördük.

Ayrıca, yöntemin gerçek uygulamasını çağıran ve çağrı sayısı, yöntemin çağrıldığı argümanlar, vb. Gibi şeyler üzerinde bir önleme görevi gören Jest spyOn komutunu kullanarak Jest ve Casusluk işlevlerini kullanarak alay etme işlevlerini de araştırdık.

PREV Eğitimi | SONRAKİ Eğitici

Önerilen Kaynaklar

^