javascript / beginner
Snippet
Überprüfen von gerendertem Überschriftstext mit der React Testing Library
Unit-Tests in React stellen sicher, dass Komponenten korrekt gemountet werden und erwartete DOM-Elemente mithilfe barrierefreier Abfragemethoden wie getByRole anzeigen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
import { render, screen } from '@testing-library/react';import '@testing-library/jest-dom';function WelcomeBanner() {return <h1>Welcome to the Platform</h1>;}test('renders platform heading correctly', () => {render(<WelcomeBanner />);const headingElement = screen.getByRole('heading', { level: 1 });expect(headingElement).toHaveTextContent('Welcome to the Platform');});
react
Erklärung
1
render(<WelcomeBanner />);
Rendert die React-Komponente in einen virtuellen Test-DOM-Container.
2
const headingElement = screen.getByRole('heading', { level: 1 });
Sucht das h1-Element im Dokument über barrierefreie Rollen.
3
expect(headingElement).toHaveTextContent('Welcome to the Platform');
Überprüft, ob das gefundene Element den erwarteten Textstring enthält.