javascript / beginner
Snippet
Prüfen gerenderter Inhalte in Komponenten-Unit-Tests
Komponententests stellen sicher, dass ein React-Element dynamische Props korrekt anzeigt. screen.getByRole lokalisiert barrierefreie Elemente und toHaveTextContent überprüft den erwarteten Text.
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 Greeting({ name }) {return <h1>Welcome, {name}!</h1>;}test('renders greeting with given prop name', () => {render(<Greeting name="Sarah" />);const heading = screen.getByRole('heading', { level: 1 });expect(heading).toHaveTextContent('Welcome, Sarah!');});
react
Erklärung
1
render(<Greeting name="Sarah" />);
Rendert die React-Komponente in einen simulierten DOM-Baum für den Test.
2
const heading = screen.getByRole('heading', { level: 1 });
Findet die Überschrift erster Ordnung über ihre semantische Barrierefreiheits-Rolle.
3
expect(heading).toHaveTextContent('Welcome, Sarah!');
Prüft per Assertion, ob der Text in der Überschrift der erwarteten Zeichenkette entspricht.