javascript / beginner
Snippet
Testen von Svelte-Komponenten mit der Testing Library
Beim Unit-Testing von Svelte-Komponenten wird die Komponente mithilfe von Vitest und der Svelte Testing Library in einem virtuellen DOM gerendert. Assertions prüfen, ob übergebene Props korrekt dargestellt werden und barrierefreie Elemente vorhanden sind.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
import { render, screen } from '@testing-library/svelte';import { test, expect } from 'vitest';import Counter from './Counter.svelte';test('renders initial count property', () => {render(Counter, { props: { initialCount: 5 } });const heading = screen.getByRole('heading', { level: 2 });expect(heading).toBeInTheDocument();expect(heading).toHaveTextContent('Count: 5');});
svelte
Erklärung
1
render(Counter, { props: { initialCount: 5 } });
Rendert die Svelte-Komponente in der Testumgebung mit den angegebenen initialen Props.
2
expect(heading).toHaveTextContent('Count: 5');
Prüft via Assertion, ob die gefundene Überschrift den erwarteten Textinhalt basierend auf der Prop enthält.