svelte-testing

Svelte-testing is a specialized skill designed to assist developers in writing, debugging, and maintaining high-quality tests for modern Svelte 5 applications. It utilizes the vitest-browser-svelte framework combined with Playwright to ensure tests run in real browser environments, bridging the gap between unit tests and production behavior. This skill is ideal for software engineers working in SvelteKit environments who need to implement robust, low-mocking testing strategies that account for both client-side interactivity and server-side logic.

• Expert patterns for client-side component testing using locators like page.getBy*().

• Deep integration guidance for SvelteKit API routes, server hooks, and server-side rendering (SSR) validation.

• Implementation of client-server alignment strategies using real FormData, Request objects, and TypeScript contracts to prevent integration mismatches.

• Advanced testing for Svelte 5 runes, including proper use of untrack() for $derived state values.

• Accessibility-first testing workflows emphasizing screen reader compatibility and keyboard navigation.

• Full support for E2E testing scenarios including authentication, form submissions, and complex state management.

• Invoke the CLI via pnpx sveltest to list, search, or retrieve specific testing patterns directly into your workflow.

• Follow the core principles: prioritize locators over containers, use real browser objects for data, and avoid manual form submission clicks in favor of expect.element() assertions.

• Organize test files consistently: use .svelte.test.ts for client components, .ssr.test.ts for rendering checks, and server.test.ts for API routes.

• Utilize the skill as a documentation source to solve common pitfalls like hydration errors, strict mode violations, and async race conditions in browser-based tests.

• Inputs: Component files, test specifications, and integration requirements. Outputs: Optimized, standard-compliant test code that adheres to industry best practices for the Svelte ecosystem.