Svelte Test Setup Runner

Set up comprehensive testing infrastructure for Svelte and SvelteKit projects including unit testing, component testing, and E2E testing frameworks with proper configuration.

When to Use This Command

Run this command when...

• You are adding testing to a SvelteKit project for the first time and need Vitest, testing-library, and optionally Playwright configured together
• Your existing test setup is incomplete or outdated and needs configuration updates for current Svelte and SvelteKit versions
• You need testing infrastructure that handles SvelteKit-specific concerns like module aliases, server mocking, and component lifecycle

Do NOT use this command when...

• Testing is already configured and you need to write specific tests -- use the test creation command
• You need to fix failing tests -- use the test fix command

Quick Start

Copy
# .claude/commands/svelte-test-setup-runner.md
# Setup Svelte testing infrastructure
Setup testing: $ARGUMENTS

Copy
# Run the command
claude "svelte-test-setup-runner configure Vitest with component testing and Playwright E2E"

Expected output:
- vitest.config.ts with Svelte transform and aliases
- @testing-library/svelte installation and setup
- Playwright config with SvelteKit dev server integration
- Test utility helpers for common patterns
- Sample test files demonstrating each test type

Core Concepts

Concept	Description
Unit Testing	Testing pure functions, stores, and utilities in isolation with Vitest
Component Testing	Rendering Svelte components with @testing-library/svelte and asserting behavior
E2E Testing	Full browser testing with Playwright against the running SvelteKit application
Module Aliases	Configuring $lib and $app path resolution in the test environment
Test Utilities	Shared helpers for common testing patterns like authenticated rendering

Testing Infrastructure:

  vitest.config.ts
  |-- Unit tests (*.test.ts)
  |-- Component tests (*.test.ts)
  |   |-- @testing-library/svelte
  |   |-- jsdom environment
  |
  playwright.config.ts
  |-- E2E tests (*.spec.ts)
  |   |-- Browser automation
  |   |-- SvelteKit dev server
  |
  test-utils/
  |-- render helpers
  |-- mock factories
  |-- fixture data

Configuration

Parameter	Default	Description
Unit Framework	Vitest	Test runner for unit and component tests
Component Library	@testing-library/svelte	Component rendering and querying library
E2E Framework	Playwright	Browser automation framework for E2E tests
Coverage Tool	v8	Code coverage provider (v8 or istanbul)
CI Integration	GitHub Actions	Continuous integration pipeline configuration

Best Practices

1. Configure module aliases first -- $lib and $app path resolution is the most common source of "module not found" errors in Svelte tests. Set these up before writing any tests
2. Use jsdom for component tests -- configure the vitest environment as jsdom for component rendering tests while keeping the default node environment for unit tests
3. Create test utilities early -- a renderWithAuth() helper and mock factories save significant duplication across your test suite
4. Separate test types by convention -- use *.test.ts for unit/component tests (Vitest) and *.spec.ts for E2E tests (Playwright) for clear separation
5. Add coverage thresholds gradually -- start without minimum coverage requirements, establish a baseline, then add thresholds that match your actual coverage level

Common Issues

1. Svelte component transforms fail -- vitest needs the @sveltejs/vite-plugin-svelte plugin. Ensure it is included in vitest.config.ts plugins array
2. $app imports undefined in tests -- create mock modules for $app/stores, $app/navigation, and $app/environment in your test setup file or vitest.config.ts
3. Playwright cannot connect to dev server -- configure webServer in playwright.config.ts with the correct port and startup command for your SvelteKit application