Test @data-client/vue composables and components - renderDataCompose, mountDataClient, fixtures, jest, nock HTTP mocking, polling/subscription tests with fake timers, useSuspense, useLive, useSubscription, Vue 3 reactive props. Use when writing or debugging tests for composables or components built on @data-client/vue.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Test @data-client/vue composables and components - renderDataCompose, mountDataClient, fixtures, jest, nock HTTP mocking, polling/subscription tests with fake timers, useSuspense, useLive, useSubscription, Vue 3 reactive props. Use when writing or debugging tests for composables or components built on @data-client/vue.
Use nock when a test must exercise the real fetch path — verifying URL construction, headers, request bodies, retries, or anything in your RestEndpoint/Resource networking layer. For pure store/state behavior, prefer initialFixtures/resolverFixtures (lighter and faster).
For dynamic server state, mutating-closure replies, request spying with jest.fn(), error responses, and mixing nock with fixtures, see references/nock-http-mocking.md.
Testing Polling and Subscriptions
For composables with pollFrequency, useLive, or useSubscription, use fake timers so polls fire deterministically. Core flow:
jest.useFakeTimers()before mount/render (so the interval is created under fake timers).
Render, then jest.advanceTimersByTime(frequency) to drive the initial fetch.
Mutate the response (e.g. responseMock.mockReturnValue(...)), advance time again, await allSettled() and await nextTick().
Restore real timers in afterEach: jest.useRealTimers().
For unsubscribe patterns, component-level polling tests, fake-timer-safe flushUntil, polling via nock, and common pitfalls, see references/polling-subscriptions.md.
Vue Suspense Behavior
useSuspense() returns Promise → ComputedRef:
const { result, waitForNextUpdate } = renderDataCompose(() =>useSuspense(ArticleResource.get, { id: 5 })
);
// Initially suspended (undefined)expect(result.current).toBeUndefined();
// Wait for resolutionawaitwaitForNextUpdate();
// Now it's a Promiseexpect(result.current).toBeInstanceOf(Promise);
// Await once to get reactive ComputedRefconst articleRef = await result.current;
// The ref is reactive - updates automaticallyexpect(articleRef.value.title).toBe('hi ho');
// After controller.setResponse() or controller.fetch():awaitnextTick();
expect(articleRef.value.title).toBe('Updated'); // Auto-updated!
useQuery() returns ComputedRef directly:
const { result } = renderDataCompose(() =>useQuery(Article, { id: 5 }));
// Synchronously available (or undefined if not in store)expect(result.current?.value).toBeDefined();
expect(result.current?.value?.title).toBe('hi ho');
// Also reactive - updates automatically
Best Practices
Always call cleanup() - Prevents memory leaks and test pollution
Use renderDataCompose() for composables (useQuery, useSuspense, useLive)
Use mountDataClient() for components
Use reactive() for props - Enables testing prop changes
Use computed() when passing reactive props to composables - Ensures proper reactivity tracking
Use flushUntil() in component tests - More reliable than fixed delays
Use waitForNextUpdate() in composable tests - Wait for suspension to resolve
Remember nextTick() - After mutations/setResponse to allow Vue reactivity to propagate
Use initialFixtures for initial state - Pre-populate the store
Use resolverFixtures for dynamic responses - Intercept requests with functions
