javascript / beginner
Snippet
Überprüfen von gerendertem Textinhalt in Komponenten-Unit-Tests
Unit-Tests stellen sicher, dass Ihre Komponenten den erwarteten Text auf dem Bildschirm anzeigen. React Testing Library bietet screen.getByText, um das virtuelle DOM abzufragen und zu überprüfen, ob Elemente im Dokument vorhanden sind.
snippet.js
javascript
1
2
3
4
5
6
7
8
import { render, screen } from '@testing-library/react';import { WelcomeBanner } from './WelcomeBanner';test('renders welcome greeting text', () => {render(<WelcomeBanner username="John" />);const greetingElement = screen.getByText(/welcome, john/i);expect(greetingElement).toBeInTheDocument();});
react
Erklärung
1
render(<WelcomeBanner username="John" />);
Rendert die React-Komponente in einen virtuellen Test-DOM-Container.
2
const greetingElement = screen.getByText(/welcome, john/i);
Sucht in der gerenderten Ausgabe nach Text, der mit einem regulären Ausdruck ohne Berücksichtigung der Groß-/Kleinschreibung übereinstimmt.
3
expect(greetingElement).toBeInTheDocument();
Prüft, ob das gefundene Element im Dokumentbaum vorhanden und angehängt ist.