javascript / beginner
Snippet
Testen von React-Komponenten mit Screen-Abfragen
Die React Testing Library ermöglicht es zu überprüfen, ob die UI den erwarteten Text anzeigt, ohne von internen Implementierungsdetails abzuhängen. Die Funktion render bindet die Komponente in einer Testumgebung ein, screen.getByText durchsucht das virtuelle DOM nach passendem Text, und Matcher wie toBeInTheDocument bestätigen das Vorhandensein des Elements.
snippet.js
javascript
1
2
3
4
5
6
7
8
import { render, screen } from '@testing-library/react';import Greeting from './Greeting';test('renders welcome message text', () => {render(<Greeting name="Alex" />);const headingElement = screen.getByText(/welcome, alex/i);expect(headingElement).toBeInTheDocument();});
react
Erklärung
1
render(<Greeting name="Alex" />);
Rendert die Greeting-Komponente mit dem angegebenen Prop in das simulierte Test-DOM.
2
const headingElement = screen.getByText(/welcome, alex/i);
Sucht im gerenderten DOM nach einem Element, das den Text passend zum regulären Ausdruck enthält.
3
expect(headingElement).toBeInTheDocument();
Prüft mittels Assertion, ob das gefundene Element tatsächlich im Dokument vorhanden ist.