Menu

Come testare le app React utilizzando Jest Framework

how test react apps using jest framework

Prova Il Nostro Strumento Per Eliminare I Problemi

In questo video tutorial, impareremo a creare e testare un'app React usando Jest, Mocking usando le funzioni Jest e Spying usando il comando Jest spyOn:

PER Introduzione completa di Jest è stato fornito nel nostro precedente tutorial. In questo tutorial vedremo come utilizzare Jest per testare le app basate su React.

Impareremo a creare un'app React bootstrap utilizzando un semplice file sopra il livello del mare comando basato e utilizzare la stessa app per scrivere i test di reazione Jest. Esploreremo anche il concetto di test di snapshot e scopriremo come si possono simulare e spiare i componenti React usando il framework Jest e il comando Jest spyon.

Testare app React e scherzi scherzosi e spie

Cosa imparerai:

React - Guida introduttiva

Jest è stato creato per testare ampiamente le app React insieme al supporto per tutti gli altri framework JavaScript.

Poiché utilizzeremo l'app React per aggiungere framework e test Jest, è imperativo e anzi un prerequisito per avere una conoscenza di base delle app React.

Per iniziare con un'app React di base, segui i passaggi seguenti:

# 1) Per creare un'app React, puoi semplicemente utilizzare un esecutore del pacchetto del nodo (cioè npx che viene fornito insieme a npm) ed eseguire il comando seguente.

npx create-react-app my-app

#Due) Una volta completato il comando precedente, apri il progetto my-app in qualsiasi editor di tua scelta: Visual Studio Code che è disponibile gratuitamente è quello consigliato.

# 3) Nella finestra del terminale / comando (all'interno dell'editor), esegui il progetto utilizzando il comando seguente.

npm start

# 4) Una volta compilato il progetto, si aprirà una nuova scheda del browser con l'URL http: // localhost: 3000

# 5) Inoltre, tieni presente che tutte le dipendenze relative a Jest vengono installate come parte del progetto React creato utilizzando il comando npx sopra menzionato.

# 6) Il progetto include anche una libreria di test React chiamata jest-dom che ha molti utili abbinamenti di elementi DOM personalizzati per Jest. (Dai un'occhiata Qui per maggiori dettagli sui concetti di React)

C'è il test delle istantanee

Il test degli snapshot è una tecnica molto utile per testare gli snapshot dei componenti React utilizzando la libreria Jest.

Proviamo prima a capire cosa sta testando l'istantanea essenzialmente significa.

L'istantanea non è altro che una rappresentazione temporale di qualsiasi cosa. Per esempio, uno screenshot, un'immagine della fotocamera, ecc. sono tutte istantanee che rappresentano i dettagli di qualsiasi cosa per un determinato momento.

Dal punto di vista di React, Snapshot non è altro che un punto di rappresentazione temporale o output di un componente React con lo stato e il comportamento forniti.

Questo viene spiegato con un semplice esempio utilizzando i passaggi seguenti.

# 1) Per iniziare con il test delle istantanee, aggiungi il pacchetto npm 'react-test-renderer' utilizzando il comando seguente.

npm i react-test-renderer

#Due) Ora, creiamo un semplice componente React che sarà la nostra applicazione in prova. Questo componente avrà uno stato semplice sotto forma di variabili di classe e proprietà di pagina.

Il componente apparirà come mostrato di seguito. Chiamiamo questo componente come Link (e quindi il nome del file del componente di reazione corrispondente sarà Link.react.js)

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} ); } }

A questo punto, questo è il modo in cui la struttura del file apparirà per il progetto React.

Struttura dei file per il progetto React

# 3) Aggiungiamo un test di istantanea per questo componente.

per) Per iniziare con lo snapshot test: il pacchetto Node react-test-renderer è un prerequisito. Installare React-node-renderer utilizzando il comando seguente.

npm i react-test-renderer

b) Aggiungi un nuovo file per aggiungere test per questo nuovo componente. Chiamiamolo come Link.test.js

c) Ora aggiungi un test di istantanea. Qui, creeremo prima un'istantanea eseguendo il rendering del componente React.

Il test apparirà come mostrato di seguito.

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(); });

Qui nel test, stiamo creando una rappresentazione JSON del componente renderizzato. Abbiamo passato il valore per la proprietà 'page' come 'www.softwaretestinghelp.com'

d) Quando viene eseguito il test dell'istantanea, viene creato un file dell'istantanea del componente (con estensione .snap ) e salvati nella directory del progetto che viene riutilizzata durante le successive esecuzioni di test.

In questo caso, verrà utilizzato un file snapshot con la proprietà della pagina fornita durante il test. Vediamo il file snapshot generato dopo aver eseguito il test utilizzando il comando 'npm test'.

e) Un file snapshot viene creato in una directory denominata '__snapshots__' nella directory src del progetto.

migliori app per telefoni spia per Android

Di seguito è riportata la struttura del progetto per questo.

Directory

La directory '__snapshots__' nello screenshot sopra viene creata nella directory principale del progetto quando il test viene eseguito per la prima volta.

f) Vediamo come apparirà il file dell'istantanea.

Apri file - Link.test.js.snap

File di istantanea

g) Sopra mostrato è l'istantanea che viene memorizzata per il componente dato.

h) Ora, ad esempio, l'implementazione del componente di cui sopra cambia. Per esempio, cambiamo il nome della pagina delle proprietà in un sito nel componente e proviamo a eseguire di nuovo il test.

Ecco come viene cambiato il componente (abbiamo cambiato la proprietà denominata page in una nuova proprietà denominata site).

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} ); } }

Ora proviamo di nuovo a eseguire i test. Poiché abbiamo già le istantanee nella directory del progetto, il nostro test dovrebbe fallire in questo scenario, poiché il codice del componente è cambiato e la vecchia corrispondenza dell'istantanea sarà un errore.

Di seguito è riportato il risultato che otteniamo durante l'esecuzione del test:

Il codice del componente è cambiato

(io) Supponiamo ora che queste modifiche siano le modifiche richieste e richiedano che i nostri test aggiornino la vecchia istantanea. In tal caso, eseguire i test con il comando update che sovrascriverebbe la vecchia istantanea e ne creerebbe una nuova basata sulle nuove modifiche nel componente stesso.

Esegui comando

yarn test -u

(j) Con il comando precedente e l'asserzione aggiornata, vedrai passare il test.

Pertanto, lo Snapshot Testing complessivo è una tecnica utile per testare l'intero componente rispetto alla vista finale e memorizzare il vecchio risultato come un'istantanea che garantisce che non vengano introdotti problemi di regressione a seguito di modifiche al codice o funzionalità o per quella materia qualsiasi refactoring al componente esistente.

Tutorial video: è disponibile il test delle istantanee

Schernendo usando lì

In questa sezione vedremo come possiamo usare i mock di Jest. I mock possono essere utilizzati in numerosi modi, come mostrato di seguito.

Per esempio,

  1. Deridere l'intero componente React
  2. Deridere una o più funzioni: non è specifico per nessun framework di sviluppo Javascript. Poiché Jest è una libreria di test javascript che non è specifica per alcun framework particolare, possiamo persino usare Jest per deridere un semplice vecchio file Javascript contenente funzioni.
  3. Mocking delle chiamate API utilizzate all'interno di funzioni o codice Javascript: possiamo usare Jest per simulare le risposte dall'integrazione di terze parti.

Discutiamo in dettaglio ciascuno di questi metodi beffardi.

Componenti di reazione beffarda

L'app React è composta da più componenti dipendenti l'uno dall'altro. Per una comprensione semplice, considera React Component come una classe, dotata di presentazione e logica.

Come ogni sistema complesso costruito utilizzando la programmazione orientata agli oggetti è composto da più classi, allo stesso modo, l'app React è una raccolta di componenti.

Ora, quando testiamo un componente, vorremmo assicurarci che non ci siano dipendenze che incidono sul test, cioè se ci sono 2 componenti, da cui dipende il componente in prova, quindi se abbiamo i mezzi per deridere i componenti dipendenti, quindi possiamo eseguire un test unitario del componente in prova in modo più completo.

Proviamo a capirlo con l'aiuto della figura seguente:

Componenti di reazione beffarda

Qui abbiamo Component1, che dipende dai Component 2 e 3.

Durante il test unitario del Componente1, possiamo sostituire il Componente2 e il Componente3 usando Jest Mocks con le loro controparti false o derise.

Vediamo come possiamo impostare questi mock. Useremo componenti semplici con un testo Html inserito all'interno di un div. Per prima cosa, vedremo il codice per i componenti dipendenti - Component2 e Component3 .

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

Ora, vediamo come apparirà Component1 che ha componenti dipendenti. Qui puoi vedere che stiamo importando i componenti dipendenti e li stiamo usando come un semplice tag HTML come & rispettivamente.

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

Vediamo ora come scrivere i test per questo componente. Per creare un test, creare una cartella 'tests' nella directory 'src'. Questo è solo per garantire che la nostra directory del progetto rimanga pulita e organizzata.

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() }) })

Nel file di test sopra, puoi vedere che abbiamo deriso Components1 e 2 usando la funzione è.mock

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

Questa configurazione sostituirà semplicemente tutte le invocazioni di Component2 con questa rappresentazione fittizia. Quindi, quando rendiamo Component1 nel test, viene chiamata la versione mocked di Component2, che abbiamo anche affermato controllando se gli elementi div Mock esistono nel documento.

Abbiamo usato il matcher 'toBeInTheDocument () qui. Questo matcher è specifico per React, poiché l'output finale di rendering delle applicazioni React non è altro che codice HTML. Quindi, questo matcher cerca che l'elemento HTML dato sia presente nel documento HTML creato da React.

Tutorial video: Jest - Componenti Mock React

Funzioni beffarde usando Jest

Ora, vediamo come possiamo usare Jest mock, per deridere una funzione specifica per un dato file JavaScript.

Funzioni beffarde utilizzando Jest

Nella figura sopra, puoi vedere che stiamo sostituendo la funzione 2 che è la dipendenza della funzione1 con una versione stubbed / derisa della funzione 2

Per prima cosa creeremo un file JavaScript di prova che fungerà da applicazione sotto test e derideremo alcuni metodi per illustrare il concetto di funzione di derisione.

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

Abbiamo 2 funzioni qui, cioè greet () e getFullName (). La funzione greet () utilizza getFullName () per ottenere il nome completo. Vedremo come possiamo sostituire la funzione getFullName () con la sua implementazione fittizia durante il test del metodo greet ().

Scriviamo un semplice test per deridere questo comportamento utilizzando la funzione mock Jest e vediamo come possiamo convalidare se la funzione mocked è stata chiamata o meno.

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') })

Qui, abbiamo dichiarato una funzione mock Jest e impostato un valore di ritorno come 'mocked name' che verrà restituito quando la funzione viene chiamata.

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

Inoltre, per convalidare che il mock è stato chiamato, possiamo usare gli abbinamenti Jest come mostrato di seguito.

  • toHaveBeenCalled () - Convalida se il mock è stato chiamato.
  • toHaveBeenCalledWith (arg1, arg2) - Convalida se il mock è stato chiamato con gli argomenti forniti.
  • toHaveBeenCalledTimes (n) - Convalida il numero di volte in cui sarebbe stato chiamato il Mock.

C'è un'altra caratteristica di Jest che si chiama Spy.

Allora cosa sono le spie e in cosa differiscono dalle prese in giro?

Il più delle volte, Spies consente la chiamata alla funzione reale ma potrebbe essere utilizzato per convalidare cose come quali argomenti sono stati usati per chiamare il metodo e anche per accertare se la chiamata al metodo è avvenuta o meno.

Spiare in Jest può essere fatto attraverso C'è spyOn comando. Jest spyOn accetta gli argomenti come l'oggetto e la funzione effettiva da spiare, ovvero chiamerà effettivamente la funzione sotto test e fungerà da intercettore intermedio.

VPN gratis per chrome
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') })

Quindi, nel codice sopra, puoi osservare che:

(io) Abbiamo impostato una spia sul metodo 'getFullName' utilizzando il comando seguente.

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

(ii) Nelle asserzioni, stiamo verificando che la spia sia stata chiamata con gli argomenti previsti.

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

Il comando Jest spyOn può anche essere utilizzato per specificare un'implementazione fittizia che dovrebbe essere chiamata al posto della funzione effettiva utilizzando il comando seguente.

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

In questo caso, la chiamata alla funzione reale viene sostituita da un'implementazione fittizia impostata con la spia.

Esercitazione video: funzioni Jest- Mock Api

Deridere le chiamate API esterne usando Jest

Nella figura seguente, puoi vedere che function1 effettua chiamate a un endpoint API esterno. Per esempio - chiamando un endpoint del partner di pagamento che dia una risposta positiva o negativa.

Ora, quando scriviamo unit test per questa funzione, non possiamo aspettarci di chiamare l'endpoint esterno ogni volta che vengono eseguiti i test.

Ci sono un paio di motivi per cui eviterai di chiamare endpoint esterni nel test.

  • Potrebbe comportare dei costi.
  • La sua risposta non può essere controllata. Non è sempre possibile verificare tutte le risposte previste ei codici di errore.
  • Potrebbe non essere sempre disponibile: se l'endpoint esterno non è disponibile, i risultati del test saranno traballanti.

Mocking delle chiamate API esterne utilizzando Jest

Per tutti questi motivi, sarebbe molto utile se potessimo controllare e bloccare il comportamento dell'endpoint esterno e creare robusti unit test per la nostra funzione.

Vediamo come possiamo ottenere chiamate API fittizie utilizzando il framework Jest. Axios è un modulo NPM che può essere scaricato / aggiunto al progetto utilizzando il comando seguente.

npm install --save-dev axios

Useremo il modulo 'axios' per effettuare chiamate API nella nostra funzione di test come mostrato di seguito.

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

Stiamo raggiungendo un endpoint esterno fittizio che restituisce dati falsi e registra il successo e la risposta all'errore.
Ora, nel nostro unit test, derideremo il modulo axios e restituiremo una risposta falsa o derisa quando la funzione chiama questo endpoint esterno.

Il codice di prova apparirà come mostrato di seguito.

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') }) })

Qui, è importante capire che qui stiamo deridendo l'intero modulo 'axios', ovvero qualsiasi chiamata che va al modulo Axios durante l'esecuzione del test andrà all'implementazione derisa e restituirà una risposta come configurato nel test.

Il modulo viene deriso utilizzando il comando seguente.

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

Abbiamo configurato il mock utilizzando il comando seguente.

axios.get.mockResolvedValue(mockedResponse)

In questo modo, possiamo simulare le risposte dagli endpoint API esterni. Qui abbiamo utilizzato un endpoint 'GET', ma lo stesso approccio potrebbe essere utilizzato anche per altri endpoint come POST, PUT, ecc.

Tutorial video: Jest - Mock Api Endpoints

Conclusione

In questo tutorial, abbiamo imparato come creare una semplice app React e abbiamo visto come Jest React può essere utilizzato per eseguire test di snapshot sui componenti React e per deridere i componenti React nel loro insieme.

Abbiamo anche esplorato il Mocking usando le funzioni Jest e Spying usando il comando Jest spyOn che chiama la reale implementazione del metodo e funge da intercettore per affermare cose come il numero di invocazioni, argomenti con cui è stato chiamato il metodo, ecc.

Tutorial PREV | PROSSIMO Tutorial

Lettura consigliata

^