ReactJS Testing: A Beginner's Guide

Hallo, zukünftige React-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser Reise in die Welt des React-Testens zu sein. Als jemand, der seit vielen Jahren Informatik unterrichtet, habe ich selbst erlebt, wie das Testen einen guten Entwickler in einen großartigen verwandeln kann. Also tauchen wir ein und enträtseln wir gemeinsam das Testen von React!

Warum das Testen wichtig ist

Bevor wir mit dem Coden beginnen, lasse ich euch eine kurze Geschichte erzählen. Ich hatte einmal einen Studenten, der eine wunderschöne React-App gebaut hat. Sie sah perfekt aus... bis sie während einer Vorführung abstürzte. Das war der Moment, in dem er auf die harte Tour lernte: Das Aussehen kann täuschen, aber Tests nicht. Testen geht nicht nur darum, Fehler zu fangen; es geht um Vertrauen. Wenn deine Tests erfolgreich sind, kannst du beruhigt schlafen, weiß, dass dein Code wie beabsichtigt funktioniert.

Create React App: Dein Test-Spielplatz

Einrichten deiner Umgebung

Lass uns mit der Erstellung einer neuen React-Anwendung mit Create React App beginnen. Dieses Tool richtet ein готов-zu-verwenden React-Projekt ein, das bereits für das Testen konfiguriert ist. Öffne dein Terminal und gebe den folgenden Befehl ein:

npx create-react-app my-react-testing-app
cd my-react-testing-app

Glückwunsch! Du hast gerade deine erste React-App mit integrierten Testfähigkeiten erstellt. Es ist, als hättest du ein neues Spielzeug mit Batterien bekommen!

Dein erster Test

Create React App kommt mit einer Beispieltestdatei. Sehen wir uns diese an. Öffne src/App.test.js:

import { render, screen } from '@testing-library/react';
import App from './App';

test('rendert den "lerne React" Link', () => {
render(<App />);
const linkElement = screen.getByText(/lerne React/i);
expect(linkElement).toBeInTheDocument();
});

Lassen wir das auseinanderbrechen:

1. Wir importieren notwendige Testwerkzeuge und unsere App-Komponente.
2. Wir definieren einen Test mit der test-Funktion.
3. Wir rendern unsere App-Komponente.
4. Wir suchen nach einem Element mit dem Text "lerne React".
5. Wir erwarten, dass dieses Element im Dokument ist.

Um diesen Test auszuführen, verwende den Befehl:

npm test

Wenn alles korrekt eingerichtet ist, solltest du einen erfolgreichen Test sehen. Glückwunsch zu deinem ersten React-Test!

Testen in einer benutzerdefinierten Anwendung

Nun, da wir einen einfachen Test gesehen haben, lassen Sie uns eigenen Komponenten erstellen und testen.

Erstellen einer einfachen Komponente

Lassen wir eine einfache Counter-Komponente erstellen. Erstelle eine neue Datei src/Counter.js:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>Zähler: {count}</p>
<button onClick={() => setCount(count + 1)}>Erhöhen</button>
</div>
);
}

export default Counter;

Diese Komponente zeigt einen Zähler und einen Knopf zum Erhöhen an.

Schreiben von Tests für unseren Counter

Jetzt testen wir unsere Counter-Komponente. Erstelle eine neue Datei src/Counter.test.js:

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('rendert den initialen Zählerstand von 0', () => {
render(<Counter />);
const countElement = screen.getByText(/zähler: 0/i);
expect(countElement).toBeInTheDocument();
});

test('erhöht den Zählerstand bei Knopfdruck', () => {
render(<Counter />);
const button = screen.getByText(/erhöhen/i);
fireEvent.click(button);
const countElement = screen.getByText(/zähler: 1/i);
expect(countElement).toBeInTheDocument();
});

Lassen wir diese Tests auseinanderbrechen:

1. Der erste Test überprüft, ob der Anfangszählerstand 0 ist.
2. Der zweite Test simuliert einen Knopfdruck und überprüft, ob der Zählerstand auf 1 erhöht wird.

Führe npm test erneut aus, und du solltest diese neuen Tests erfolgreich sehen!

Fortgeschrittene Testkonzepte

Wenn du dich wohler mit grundlegendem Testen fühlst, möchtest du möglicherweise fortgeschrittene Konzepte erkunden. Hier ist eine Tabelle mit einigen Methoden, die du commonly im React-Testing verwenden wirst:

Methode	Beschreibung	Beispiel
render	Rendert eine React-Komponente für das Testen	render(<MyComponent />)
screen.getByText	Findet ein Element anhand seines Textinhaltes	screen.getByText(/hello world/i)
screen.getByRole	Findet ein Element anhand seiner ARIA-Rolle	screen.getByRole('button')
fireEvent	Simuliert DOM-Events	fireEvent.click(button)
waitFor	Wartet, bis Erwartungen erfüllt sind	await waitFor(() => expect(element).toBeVisible())
act	Verpackt Code, der React-Statusaktualisierungen verursacht	act(() => { /* führe Aktionen aus */ })

Testen asynchroner Verhaltensweisen

React-Anwendungen sind oft asynchrone Operationen beteiligt. Lassen Sie uns ein Komponent, das Daten abruft und testen:

// UserData.js
import React, { useState, useEffect } from 'react';

function UserData() {
const [userData, setUserData] = useState(null);

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => response.json())
.then(data => setUserData(data));
}, []);

if (!userData) return <div>Lädt...</div>;

return <div>Benutzername: {userData.name}</div>;
}

export default UserData;

Jetzt testen wir diese Komponente:

// UserData.test.js
import { render, screen, waitFor } from '@testing-library/react';
import UserData from './UserData';

test('lädt und zeigt Benutzerdaten', async () => {
render(<UserData />);

expect(screen.getByText(/lädt/i)).toBeInTheDocument();

await waitFor(() => {
expect(screen.getByText(/benutzername:/i)).toBeInTheDocument();
});
});

Dieser Test überprüft den Ladezustand und wartet dann, bis die Benutzerdaten angezeigt werden.

Schlussfolgerung

Das Testen in React mag zunächst einschüchternd erscheinen, aber es ist eine unschätzbare Fähigkeit, die dich zu einem besseren Entwickler macht. Denke daran, jeder von dir geschriebene Test ist wie ein Sicherheitsnetz für deinen Code. Es fängt dich auf, wenn du fällt und gibt dir das Vertrauen, höher zu klettern.

Während du deine Reise mit React fortsetzt, weiter zu erkunden verschiedene Testtechniken. Mock API-Aufrufe, teste Fehlerzustände und fordere dich heraus, Tests zu schreiben, bevor du deine Komponenten erstellst (Test-Driven Development). Je öfter du übst, desto natürlicher wird es.

Frohes Testen und möge deine Konsole immer mit erfolgreichen Tests grün bleiben!

Credits: Image by storyset