how test react apps using jest framework
In diesem Video-Tutorial lernen wir, wie Sie eine React-App mit Jest erstellen, testen, mit Jest verspotten und mit dem Befehl Jest spyOn Spionagefunktionen ausführen:
ZU Vollständige Einführung von Jest wurde in unserem vorherigen Tutorial gegeben. In diesem Tutorial erfahren Sie, wie Sie Jest zum Testen von React-basierten Apps verwenden.
Wir werden lernen, eine Bootstrap-React-App mit einem einfachen zu erstellen Über dem Meeresspiegel Befehl und verwenden Sie die gleiche App zum Schreiben von Jest-Reaktionstests. Wir werden auch das Konzept des Schnappschuss-Testens untersuchen und erfahren, wie Sie React-Komponenten mit dem Jest-Framework und dem Befehl Jest spyon verspotten und ausspionieren können.
Was du lernen wirst:
Reagieren - Erste Schritte
Jest wurde entwickelt, um React-Apps ausgiebig zu testen und alle anderen JavaScript-Frameworks zu unterstützen.
Da wir die React-App verwenden, um Jest-Framework und -Tests hinzuzufügen, ist es unerlässlich und in der Tat eine Grundvoraussetzung für ein grundlegendes Verständnis der React-Apps.
Führen Sie die folgenden Schritte aus, um mit einer einfachen React-App zu beginnen:
# 1) Um eine React-App zu erstellen, können Sie einfach einen Knotenpaket-Executor (d. H. Npx, der auch mit npm geliefert wird) verwenden und den folgenden Befehl ausführen.
npx create-react-app my-app
#zwei) Öffnen Sie nach Abschluss des obigen Befehls das Projekt my-app in einem beliebigen Editor Ihrer Wahl. Es wird empfohlen, frei verfügbaren Visual Studio-Code zu verwenden.
#3) Führen Sie das Projekt im Terminal- / Befehlsfenster (im Editor) mit dem folgenden Befehl aus.
npm start
# 4) Sobald das Projekt kompiliert ist, wird eine neue Browser-Registerkarte mit der URL http: // localhost: 3000 geöffnet
# 5) Beachten Sie außerdem, dass alle Jest-bezogenen Abhängigkeiten als Teil des React-Projekts installiert werden, das mit dem oben genannten Befehl npx erstellt wurde.
# 6) Das Projekt enthält auch eine React-Testbibliothek mit dem Namen jest-dom, die viele hilfreiche benutzerdefinierte DOM-Element-Matcher für Jest enthält. (Prüfen Hier für weitere Details zu React-Konzepten)
Es gibt Snapshot-Tests
Snapshot-Tests sind eine sehr nützliche Technik zum Testen von React-Komponenten-Snapshots mithilfe der Jest-Bibliothek.
Versuchen wir zunächst zu verstehen, welche Schnappschusstests durchgeführt wurden im Wesentlichen bedeutet.
Schnappschuss ist nichts anderes als eine zeitliche Darstellung von irgendetwas. Zum Beispiel, Ein Screenshot, ein Kamerabild usw. sind alles Schnappschüsse, die die Details von irgendetwas für einen bestimmten Zeitpunkt darstellen.
Aus der Sicht von React ist Snapshot nichts anderes als eine zeitliche Darstellung oder Ausgabe einer React-Komponente mit dem angegebenen Status und Verhalten.
Dies wird anhand eines einfachen Beispiels anhand der folgenden Schritte erläutert.
# 1) Fügen Sie das npm-Paket 'react-test-renderer' mit dem folgenden Befehl hinzu, um mit dem Testen von Schnappschüssen zu beginnen.
npm i react-test-renderer
#zwei) Erstellen wir nun eine einfache React-Komponente, die unsere zu testende Anwendung sein wird. Diese Komponente hat einen einfachen Status in Form von Klassenvariablen und Seiteneigenschaften.
Die Komponente würde wie unten gezeigt aussehen. Nennen wir diese Komponente Link (und der entsprechende Name der Reaktionskomponentendatei lautet 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} ); } }
Zu diesem Zeitpunkt sieht die Dateistruktur auf diese Weise für das React-Projekt aus.
#3) Fügen wir einen Snapshot-Test für diese Komponente hinzu.
zu) Erste Schritte mit dem Snapshot-Test - Das Node-Paket für den React-Test-Renderer ist eine Voraussetzung. Installieren React-Node-Renderer mit dem folgenden Befehl.
npm i react-test-renderer
b) Fügen Sie eine neue Datei zum Hinzufügen von Tests für diese neue Komponente hinzu. Nennen wir es so Link.test.js
c) Fügen Sie nun einen Schnappschuss-Test hinzu. Hier erstellen wir zunächst einen Schnappschuss, indem wir die React-Komponente rendern.
Der Test würde wie unten gezeigt aussehen.
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(); });
Hier im Test erstellen wir eine JSON-Darstellung der gerenderten Komponente. Wir haben den Wert für die Eigenschaft 'page' als 'www.softwaretestinghelp.com' übergeben.
d) Wenn der Snapshot-Test ausgeführt wird, wird eine Snapshot-Datei der Komponente erstellt (mit der Erweiterung .snap ) und im Projektverzeichnis gespeichert, das bei den nächsten Testausführungen wiederverwendet wird.
In diesem Fall wird eine Snapshot-Datei mit der während des Tests angegebenen Seiteneigenschaft verwendet. Lassen Sie uns sehen, wie die Snapshot-Datei nach dem Ausführen des Tests mit dem Befehl 'npm test' generiert wird.
ist) Eine Snapshot-Datei wird unter einem Verzeichnis mit dem Namen '__snapshots__' im Projekt-src-Verzeichnis erstellt.
Kopieren Sie DVD-Filme kostenlos auf die Festplatte
Unten ist die Projektstruktur dafür angegeben.
Das Verzeichnis '__snapshots__' im obigen Screenshot wird im Projektstammverzeichnis erstellt, wenn der Test zum ersten Mal ausgeführt wird.
f) Mal sehen, wie die Snapshot-Datei aussehen wird.
Datei öffnen - Link.test.js.snap
G) Oben ist der Schnappschuss dargestellt, der für die angegebene Komponente gespeichert wird.
h) Jetzt ändert sich beispielsweise die Implementierung der obigen Komponente. Zum Beispiel, Lassen Sie uns den Namen der Eigenschaftsseite in eine Site in der Komponente ändern und versuchen, den Test erneut auszuführen.
Auf diese Weise wird die Komponente geändert (wir haben die Seite mit dem Namen der Eigenschaft in eine neue Seite mit dem Namen site geändert).
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} ); } }
Versuchen wir nun erneut, die Tests auszuführen. Da wir die Snapshots bereits im Projektverzeichnis haben, wird erwartet, dass unser Test in diesem Szenario fehlschlägt - da sich der Komponentencode geändert hat und die alte Snapshot-Übereinstimmung fehlschlägt.
Im Folgenden ist das Ergebnis angegeben, das wir beim Ausführen des Tests erhalten:
(ich) Nehmen wir nun an, dass diese Änderungen die erforderlichen Änderungen sind und dass unsere Tests erforderlich sind, um den alten Snapshot zu aktualisieren. Führen Sie in diesem Fall die Tests mit dem Befehl update aus, der den alten Snapshot überschreibt, und erstellen Sie einen neuen basierend auf den neuen Änderungen in der Komponente selbst.
Führen Sie den Befehl aus
yarn test -u
(j) Mit dem obigen Befehl und der aktualisierten Zusicherung wird der Test bestanden.
Daher ist das Testen von Snapshots insgesamt eine nützliche Technik, um die gesamte Komponente anhand der endgültigen Ansicht zu testen und das alte Ergebnis als Snapshot zu speichern. Dadurch wird sichergestellt, dass keine Regressionsprobleme aufgrund von Codeänderungen oder -funktionen oder Refactoring auftreten auf die vorhandene Komponente.
Video-Tutorial: Es gibt Snapshot-Tests
Verspotten mit dort
In diesem Abschnitt werden wir sehen, wie wir Jest Mocks verwenden können. Die Mocks können auf verschiedene Arten verwendet werden, wie unten gezeigt.
Zum Beispiel,
- Verspotten der gesamten Reaktionskomponente
- Verspotten einzelner oder mehrerer Funktionen - Dies ist nicht spezifisch für ein Javascript-Entwicklungsframework. Da Jest eine Javascript-Testbibliothek ist, die nicht für ein bestimmtes Framework spezifisch ist, können wir Jest sogar verwenden, um eine einfache alte Javascript-Datei mit Funktionen zu verspotten.
- Verspotten von API-Aufrufen, die in Funktionen oder Javascript-Code verwendet werden - Wir können Jest verwenden, um Antworten aus der Integration von Drittanbietern zu verspotten.
Lassen Sie uns jede dieser Verspottungsmethoden im Detail diskutieren.
Spottreaktionskomponenten
Die React App besteht aus mehreren voneinander abhängigen Komponenten. Betrachten Sie zum einfachen Verständnis React Component als eine Klasse mit Präsentation und Logik.
Wie jedes komplexe System, das mit objektorientierter Programmierung erstellt wurde, besteht es aus mehreren Klassen. Ebenso ist React App eine Sammlung von Komponenten.
Wenn wir nun eine Komponente testen, möchten wir sicherstellen, dass es keine Abhängigkeiten gibt, die sich auf das Testen auswirken, dh wenn es zwei Komponenten gibt, von denen die zu testende Komponente abhängig ist, und wenn wir die Mittel haben, die abhängigen Komponenten zu verspotten, Dann können wir die zu testende Komponente vollständiger testen.
Versuchen wir dies anhand der folgenden Abbildung zu verstehen:
Hier haben wir Komponente1, die von Komponente 2 & 3 abhängig ist.
Während des Komponententests von Komponente1 können wir Komponente2 und Komponente3 mithilfe von Jest Mocks durch ihre gefälschten oder verspotteten Gegenstücke ersetzen.
Mal sehen, wie wir diese Mocks einrichten können. Wir werden einfache Komponenten mit einem HTML-Text verwenden, der in einem div platziert ist. Zuerst sehen wir den Code für abhängige Komponenten - Komponente2 und Komponente3 .
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
Lassen Sie uns nun sehen, wie Komponente1 mit abhängigen Komponenten aussehen wird. Hier sehen Sie, dass wir die abhängigen Komponenten importieren und als einfaches HTML-Tag wie & verwenden.
import React, { Component} from 'react' import Component2 from './component2' import Component3 from './component3' class Component1 extends Component { render() { return( Hello Component1 ) } } export default Component1
Lassen Sie uns nun sehen, wie wir Tests für diese Komponente schreiben können. Um einen Test zu erstellen, erstellen Sie einen Ordner 'tests' im Verzeichnis 'src'. Dies dient nur dazu, sicherzustellen, dass unser Projektverzeichnis sauber und organisiert bleibt.
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() }) })
In der obigen Testdatei können Sie sehen, dass wir die Komponenten 1 und 2 mit der Funktion verspottet haben is.mock
jest.mock('../components/component2', () => () => Hello Mock Component2 )
Dieses Setup ersetzt einfach alle Aufrufe von Component2 durch diese Scheindarstellung. Wenn wir also Komponente1 im Test rendern, wird die verspottete Version von Komponente2 aufgerufen, die wir auch bestätigt haben, indem wir überprüft haben, ob die Mock-div-Elemente im Dokument vorhanden sind.
Wir haben hier den Matcher 'toBeInTheDocument ()' verwendet. Dieser Matcher ist reaktionsspezifisch, da die endgültig gerenderte Ausgabe von React-Anwendungen nichts anderes als HTML-Code ist. Daher sucht dieser Matcher nach dem angegebenen HTML-Element, das in dem von React erstellten HTML-Dokument vorhanden sein soll.
Video-Tutorial: Jest - Mock React-Komponenten
Verspottungsfunktionen mit Scherz
Lassen Sie uns nun sehen, wie wir Jest-Mocks verwenden können, um eine bestimmte Funktion für eine bestimmte JavaScript-Datei zu verspotten.
In der obigen Abbildung sehen Sie, dass wir Funktion 2, die die Abhängigkeit von Funktion1 ist, durch eine gestoppelte / verspottete Version von Funktion 2 ersetzen
Wir werden zuerst eine Test-JavaScript-Datei erstellen, die als zu testende Anwendung dient, und wir werden dort einige Methoden verspotten, um das Konzept der Verspottungsfunktion zu veranschaulichen.
function getFullName(firstname, lastname) { return firstname + ' ' + lastname } function greet(firstname, lastname) { return 'Hello! ' + this.getFullName(firstname,lastname) } module.exports = {getFullName, greet}
Wir haben hier 2 Funktionen, d. H. Greet () und getFullName (). Die Funktion greet () verwendet getFullName (), um den vollständigen Namen zu erhalten. Wir werden sehen, wie wir die Funktion getFullName () durch ihre Scheinimplementierung ersetzen können, während wir die greet () -Methode testen.
Schreiben wir einen einfachen Test, um dieses Verhalten mithilfe der Jest-Mock-Funktion zu verspotten, und sehen wir, wie wir überprüfen können, ob die verspottete Funktion aufgerufen wurde oder nicht.
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') })
Hier haben wir eine Jest-Mock-Funktion deklariert und einen Rückgabewert als 'Mocked Name' eingerichtet, der beim Aufruf der Funktion zurückgegeben wird.
const mock = jest.fn().mockReturnValue('mocked name')
Um zu überprüfen, ob der Mock aufgerufen wurde, können wir die Jest-Matcher wie unten gezeigt verwenden.
- toHaveBeenCalled () - Überprüft, ob der Mock aufgerufen wurde.
- toHaveBeenCalledWith (arg1, arg2) - Überprüft, ob der Mock mit den angegebenen Argumenten aufgerufen wurde.
- toHaveBeenCalledTimes (n) - Überprüft, wie oft der Mock aufgerufen wurde.
Es gibt noch eine weitere Funktion von Jest, die Spy heißt.
Was sind Spione und wie unterscheiden sie sich von Spott?
In den meisten Fällen erlaubt Spies den eigentlichen Funktionsaufruf, kann jedoch verwendet werden, um beispielsweise zu überprüfen, welche Argumente zum Aufrufen der Methode verwendet wurden, und um festzustellen, ob der Methodenaufruf stattgefunden hat oder nicht.
Spionage im Scherz kann durch erfolgen Es gibt SpyOn Befehl. Jest spyOn verwendet Argumente als Objekt und die eigentliche Funktion, die ausspioniert werden soll, d. H. Es ruft die zu testende Funktion tatsächlich auf und fungiert als Zwischenabfangjäger.
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') })
Im obigen Code können Sie also Folgendes beobachten:
(ich) Wir haben eine Spionagemethode 'getFullName' mit dem folgenden Befehl eingerichtet.
const getFullNameSpy = jest.spyOn(greeter, 'getFullName')
(ii) In Behauptungen überprüfen wir, ob der Spion mit erwarteten Argumenten aufgerufen wurde.
expect(getFullNameSpy).toHaveBeenCalled() expect(getFullNameSpy).toHaveBeenCalledWith('aman','kumar')
Der Befehl Jest spyOn kann auch verwendet werden, um eine Scheinimplementierung anzugeben, die anstelle der eigentlichen Funktion mit dem folgenden Befehl aufgerufen werden soll.
const getFullNameSpy = jest.spyOn(greeter, 'getFullName').mockImplementation()
In diesem Fall wird der eigentliche Funktionsaufruf durch eine Scheinimplementierung ersetzt, die mit dem Spion eingerichtet wurde.
Video-Tutorial: Jest-Mock-API-Funktionen
Externe API-Aufrufe mit Jest verspotten
In der folgenden Abbildung sehen Sie, dass function1 einen externen API-Endpunkt aufruft. Zum Beispiel - Aufrufen eines Zahlungspartner-Endpunkts, der eine Antwort auf Erfolg oder Misserfolg gibt.
Wenn wir jetzt Komponententests für diese Funktion schreiben, können wir nicht erwarten, dass der externe Endpunkt jedes Mal aufgerufen wird, wenn die Tests ausgeführt werden.
Es gibt mehrere Gründe, aus denen Sie vermeiden würden, externe Endpunkte im Test aufzurufen.
- Dies kann Kosten verursachen.
- Seine Reaktion kann nicht kontrolliert werden. Sie können nicht immer alle erwarteten Antwort- und Fehlercodes testen.
- Es ist möglicherweise nicht immer verfügbar. Wenn der externe Endpunkt nicht verfügbar ist, sind die Testergebnisse unzuverlässig.
Aus all diesen Gründen wäre es sehr nützlich, wenn wir das Verhalten des externen Endpunkts steuern und stubben und robuste Komponententests für unsere Funktion erstellen könnten.
Lassen Sie uns sehen, wie wir mit dem Jest-Framework spöttische API-Aufrufe erzielen können. Axios ist ein NPM-Modul, das mit dem folgenden Befehl heruntergeladen / zum Projekt hinzugefügt werden kann.
npm install --save-dev axios
Wir werden das Axios-Modul verwenden, um API-Aufrufe in unserer Testfunktion durchzuführen, wie unten gezeigt.
function getUserData() { axios.get('https://reqres.in/api/users/2') .then(response => console.log(response.data)) .catch(error => console.log(error)); }
Wir treffen auf einen externen Dummy-Endpunkt, der gefälschte Daten zurückgibt und Erfolg und Fehlerreaktion protokolliert.
In unserem Unit-Test werden wir nun das Axios-Modul verspotten und eine gefälschte oder verspottete Antwort zurückgeben, wenn die Funktion diesen externen Endpunkt aufruft.
Der Testcode sieht wie folgt aus.
VPN für kodi einrichten
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') }) })
Hier ist es wichtig zu verstehen, dass wir hier das gesamte Axios-Modul verspotten, d. H. Jeder Aufruf, der während der Testausführung an das Axios-Modul geht, geht an die verspottete Implementierung und gibt eine Antwort zurück, wie im Test konfiguriert.
Das Modul wird mit dem folgenden Befehl verspottet.
const axios = require('axios') jest.mock('axios');
Wir haben das Modell mit dem folgenden Befehl konfiguriert.
axios.get.mockResolvedValue(mockedResponse)
Auf diese Weise können wir Antworten von externen API-Endpunkten verspotten. Hier haben wir einen GET-Endpunkt verwendet, aber der gleiche Ansatz könnte auch für andere Endpunkte wie POST, PUT usw. verwendet werden.
Video-Tutorial: Jest - Mock Api-Endpunkte
Fazit
In diesem Tutorial haben wir gelernt, wie man eine einfache React-App erstellt und wie Jest React zum Durchführen von Snapshot-Tests für React-Komponenten sowie zum Verspotten von React-Komponenten als Ganzes verwendet werden kann.
Wir haben auch das Verspotten mit Jest- und Spying-Funktionen mit dem Befehl Jest spyOn untersucht, der die eigentliche Implementierung der Methode aufruft und als Abfangjäger fungiert, um Dinge wie die Anzahl der Aufrufe, Argumente, mit denen die Methode aufgerufen wurde, usw. zu bestätigen.
PREV Tutorial | NÄCHSTES Tutorial
Literatur-Empfehlungen
- Jest Tutorial - Testen von JavaScript-Einheiten mit Jest Framework
- Jest-Konfiguration und Debuggen von Jest-basierten Tests
- 25 besten Java-Test-Frameworks und -Tools für Automatisierungstests (Teil 3)
- So richten Sie das Node.js-Testframework ein: Node.js-Lernprogramm
- Einführung in JUnit Framework und seine Verwendung in Selenium Script - Selenium Tutorial # 11
- Jasmine Framework Tutorial einschließlich Jasmine Jquery mit Beispielen
- JCF-Tutorial (Java Collections Framework)