javascript / expert
Snippet
Mocking von benutzerdefinierten Komponenten-Event-Payloads in Svelte-Unit-Tests
Das Testen benutzerdefinierter Event-Handler in Svelte-Komponenten erfordert das Mocken von Callback-Funktionen mit Spies wie `vi.fn()` von Vitest. Durch die Übergabe von Spy-Funktionen über Komponenten-Props oder Event-Listener können Entwickler Interaktionen über `@testing-library/svelte` auslösen und die gesendete Payload-Struktur strikt überprüfen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { render, fireEvent } from '@testing-library/svelte';import { vi, expect, test } from 'vitest';import CustomForm from './CustomForm.svelte';test('dispatches submitted payload correctly upon user submit', async () => {const handleSubmit = vi.fn();const { getByRole } = render(CustomForm, { props: { onsubmit: handleSubmit } });const submitBtn = getByRole('button', { name: /submit/i });await fireEvent.click(submitBtn);expect(handleSubmit).toHaveBeenCalledOnce();expect(handleSubmit).toHaveBeenCalledWith(expect.objectContaining({ detail: { valid: true } }));});
svelte
Erklärung
1
const handleSubmit = vi.fn();
Erstellt eine Vitest-Spy-Funktion, um Aufrufe des Komponenten-Event-Emitters zu erfassen.
2
const { getByRole } = render(CustomForm, { props: { onsubmit: handleSubmit } });
Rendert die Svelte-Komponente in ein synthetisches DOM mit dem Spy als Property.
3
await fireEvent.click(submitBtn);
Simuliert asynchron einen Benutzer-Klick, um Svelte-DOM-Eventhandler auszulösen.
4
expect(handleSubmit).toHaveBeenCalledWith(expect.objectContaining({ detail: { valid: true } }));
Überprüft, dass der gemockte Event-Callback die erwartete strukturierte Payload erhalten hat.