javascript / intermediate
Snippet
Unit-Testing von Vue-Composables mit isoliertem App-Kontext
Beim Unit-Testing von Composables, die auf Vue-Lifecycle-Hooks oder provide/inject angewiesen sind, stellt die Ausführung in einer Hilfsfunktion wie withSetup sicher, dass eine aktive Vue-Instanz existiert. Dies isoliert die Reaktivitätslogik während der Testausführung sauber vom UI-Rendering.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { describe, it, expect } from 'vitest';import { ref, createApp } from 'vue';export function useCounter(initialValue = 0) {const count = ref(initialValue);const increment = () => { count.value++; };return { count, increment };}export function withSetup(composable) {let result;const app = createApp({setup() {result = composable();return () => {};}});app.mount(document.createElement('div'));return [result, app];}describe('useCounter', () => {it('increments count correctly within Vue scope', () => {const [counterApp, app] = withSetup(() => useCounter(5));expect(counterApp.count.value).toBe(5);counterApp.increment();expect(counterApp.count.value).toBe(6);app.unmount();});});
vue
Erklärung
1
export function withSetup(composable) {
Definiert eine Test-Wrapper-Funktion, um Composables in einem simulierten Vue-App-Kontext auszuführen.
2
const app = createApp({ setup() { result = composable(); return () => {}; } });
Erstellt eine minimale Anwendungskomponente, die das Composable innerhalb ihrer setup-Methode ausführt.
3
const [counterApp, app] = withSetup(() => useCounter(5));
Führt das Composable innerhalb der simulierten Anwendungsumgebung für Tests aus.
4
app.unmount();
Räumt die gemountete Test-Anwendungsinstanz auf, um Speicherlecks zwischen Tests zu vermeiden.