data-client-vue-testing_skill

Overview

This skill provides a testing toolkit for @data-client/vue composables and components, including renderDataCompose and mountDataClient helpers. It streamlines testing of useQuery, useSuspense, mutations, polling, and reactive prop flows with fixtures, interceptors, and Vue Test Utils integration. The helpers handle Suspense, reactive props, and expose controller utilities for deterministic updates and assertions.

How this skill works

renderDataCompose runs a composable in a test harness and returns result.current (a ComputedRef or a Promise when suspended), controller, helper waiters, and cleanup. mountDataClient mounts Vue components with full data-client integration, automatic Suspense handling, and a wrapper for DOM assertions. Both accept initialFixtures and resolverFixtures to pre-populate or intercept network behavior, and support reactive props via Vue's reactive and computed utilities.

When to use it

• Unit-test composables like useQuery, useLive, and useSuspense with deterministic store state.
• Test components that rely on data-client, including Suspense fallbacks and async setup.
• Simulate REST/GraphQL responses with static fixtures or dynamic resolverFixtures.
• Verify mutation flows and optimistic updates by calling controller.fetch or controller.setResponse.
• Test polling/subscription behavior with time control (jest timers) and nock for HTTP mocking.

Best practices

• Always call cleanup() in afterEach to avoid test bleed and memory leaks.
• Use initialFixtures to seed store state for synchronous assertions.
• Use resolverFixtures for dynamic or function-based responses instead of global HTTP mocks when possible.
• Wrap changing props with reactive() and pass computed() into composables to preserve reactivity.
• Use waitForNextUpdate() for composable resolution and flushUntil() for component DOM readiness.
• After controller.setResponse or fetch, await nextTick() to let Vue reactivity propagate before asserting.

Example use cases

• Assert useQuery returns cached entities immediately by seeding initialFixtures.
• Mount a Suspense-backed component and assert fallback appears and resolves to rendered content.
• Simulate a push mutation to a collection and verify the list length increases using controller.fetch.
• Test reactive prop changes by mutating a reactive prop and asserting the composable updates.
• Use nock to emulate server polling and jest fake timers to assert periodic updates.