javascript / beginner
Snippet
Überprüfen von gerendertem Text mit der React Testing Library
Die React Testing Library konzentriert sich darauf, das Verhalten von Komponenten aus der Benutzerperspektive zu testen. Die render-Methode erzeugt die DOM-Ausgabe einer Komponente, und Abfragefunktionen wie screen.getByText prüfen den gerenderten Baum auf das Vorhandensein erwarteter Textwerte.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
import { render, screen } from '@testing-library/react';import { expect, test } from 'vitest';function Greeting({ name }) {return <h1>Hello, {name}!</h1>;}test('displays the correct greeting text', () => {render(<Greeting name="Alice" />);const headingElement = screen.getByText('Hello, Alice!');expect(headingElement).toBeDefined();});
react
Erklärung
1
render(<Greeting name="Alice" />);
Rendert die Greeting-Komponente mit den angegebenen Props in eine virtuelle Test-DOM-Umgebung.
2
const headingElement = screen.getByText('Hello, Alice!');
Durchsucht das gerenderte DOM nach einem sichtbaren Element mit dem exakt übereinstimmenden String.
3
expect(headingElement).toBeDefined();
Prüft mit einer Assertion, ob das gefundene Überschrift-Element in der Ausgabe existiert.