javascript / beginner
Snippet
Erstellen von Komponenten-Unit-Tests mit der Svelte Testing Library
Unit-Tests für Svelte-Komponenten stellen sicher, dass UI-Elemente basierend auf übergebenen Props korrekt gerendert werden. Die render-Methode montiert die Komponente in ein Test-DOM, während Abfragen wie screen.getByText das DOM-Element finden.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
import { render, screen } from '@testing-library/svelte';import { test, expect } from 'vitest';import StatusBadge from './StatusBadge.svelte';test('renders active status badge correctly', () => {render(StatusBadge, { status: 'Online' });const badge = screen.getByText('Online');expect(badge).toBeDefined();});
svelte
Erklärung
1
import { render, screen } from '@testing-library/svelte';
Importiert Hilfsfunktionen zum Rendern von Komponenten und Abfragen des Test-DOMs.
2
render(StatusBadge, { status: 'Online' });
Rendert die Svelte-Komponente mit den übergebenen Test-Props.
3
const badge = screen.getByText('Online');
Sucht im virtuellen DOM-Baum nach einem Element mit dem angegebenen Text.
4
expect(badge).toBeDefined();
Überprüft per Assertion, ob das gefundene Element im gerenderten DOM existiert.