Skip to main content
command

svelte-test — Claude Code command: tests for Svelte

This command creates tests for Svelte components and SvelteKit routes, from component behavior to end-to-end flows. Use it to cover user actions, form handling, and error states.

Install into Claude Code · claude-code-templates All methods and platforms ↓
npx claude-code-templates@latest --command svelte/svelte-test
Open on GitHub

What svelte-test does

The command examines a component, route, store, or utility, then chooses a suitable test approach. It checks existing patterns in the project and can draft tests for interactions, prop variations, events, route loaders, and form actions.

Component and unit tests can use Vitest; Playwright is the option for end-to-end user flows. The command also considers accessibility, edge cases, and errors. It can suggest performance and visual regression checks too, so review those against the needs of your project before adding them.

What it helps with

  • test a component's view and edit modes
  • cover route loaders and form actions
  • check store updates and derived values
  • write an end-to-end user flow
  • add accessibility and error-state checks

Example prompts for the agent

  • Create tests for the user profile component's edit mode.
  • Test this route's loader and error handling.
  • Add a Playwright test for form submission and navigation.

How to install svelte-test

1claude-code-templates

npx claude-code-templates@latest --command svelte/svelte-test

2Manually: put the files in place

.claude/commands/svelte-test.md

Call it with /svelte-test. For all projects use ~/.claude/commands/

Questions about svelte-test

How do I install svelte-test in Claude Code?

Run npx claude-code-templates@latest --command svelte/svelte-test, then use .claude/commands/svelte-test.md.

What does svelte-test do?

It examines Svelte or SvelteKit code and creates suitable tests for components, routes, stores, or user flows.

Which testing tools does the command use?

It suggests Vitest for unit and component tests, and Playwright for end-to-end tests.

Source text

svelte-test.md · MIT
---
description: "Create comprehensive tests for Svelte components and SvelteKit routes, including unit tests, component tests, and E2E tests."
---

# /svelte:test

Create comprehensive tests for Svelte components and SvelteKit routes, including unit tests, component tests, and E2E tests.

## Instructions

You are acting as the Svelte Testing Specialist Agent. When creating tests:

1. **Analyze the Target**:
   - Identify what needs testing (component, route, store, utility)
   - Determine appropriate test types (unit, integration, E2E)
   - Review existing test patterns in the codebase

2. **Test Creation Strategy**:
   - **Component Tests**: User interactions, prop variations, slots, events
   - **Route Tests**: Load functions, form actions, error handling
   - **Store Tests**: State changes, derived values, subscriptions
   - **E2E Tests**: User flows, navigation, form submissions

3. **Test Structure**:
   ```javascript
   // Component Test Example
   import { render, fireEvent } from '@testing-library/svelte';
   import { expect, test, describe } from 'vitest';
   
   describe('Component', () => {
     test('user interaction', async () => {
       // Arrange
       // Act
       // Assert
     });
   });
   ```

4. **Coverage Areas**:
   - Happy path scenarios
   - Edge cases and error states
   - Accessibility requirements
   - Performance constraints
   - Security considerations

5. **Test Types to Generate**:
   - Vitest unit/component tests
   - Playwright E2E tests
   - Accessibility tests
   - Performance tests
   - Visual regression tests

## Example Usage

User: "Create tests for my UserProfile component that has edit mode"

Assistant will:
- Analyze UserProfile component structure
- Create comprehensive component tests
- Test view/edit mode transitions
- Test form validation in edit mode
- Add accessibility tests
- Create E2E test for full user flow
- Suggest additional test scenarios

© davila7 · MIT · davila7/claude-code-templates

Similar slash commands

All slash commands for Testing and QA →

From the same set740

The whole set →

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor