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

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

render(<Greeting name="Alice" />);

Rendert die Greeting-Komponente mit den angegebenen Props in eine virtuelle Test-DOM-Umgebung.

const headingElement = screen.getByText('Hello, Alice!');

Durchsucht das gerenderte DOM nach einem sichtbaren Element mit dem exakt übereinstimmenden String.

expect(headingElement).toBeDefined();

Prüft mit einer Assertion, ob das gefundene Überschrift-Element in der Ausgabe existiert.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Überprüfen von gerendertem Text mit der React Testing Library

Verwandt