Skip to main content
command

svelte-test-fix — Claude Code command: fix failing Svelte tests

A Claude slash command that digs into failing Svelte and SvelteKit tests and proposes fixes. Useful right after a component change breaks your suite.

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

What svelte-test-fix does

The command switches the agent into a Svelte testing specialist role. It reads error messages and stack traces, then looks for a pattern: does the test fail every run, only in one environment, or intermittently? Recent code changes get reviewed too, since that is often where the break came from.

Work is split into three groups. Component tests cover async timing, cleanup after unmount, reactivity and bindings, and DOM queries. E2E covers waits, data-testid selectors, route configuration and API mocks. Environment issues cover import paths, the test tsconfig, missing globals and build conflicts. For debugging it suggests debug() from Testing Library, printing component state, and page.pause() in Playwright.

The fix strategy is straightforward: isolate the failing test, add logging, simplify the case, mock external dependencies. Flaky tests get retry logic. One caveat — this assumes a test setup already exists. Without a runner or Playwright in place, you have to install those first.

What it helps with

  • read a stack trace from a broken component test
  • fix a test that fails intermittently
  • track down a Cannot access before initialization error
  • set up waits and selectors for Playwright E2E tests
  • remove conflicts between the test build and the main build

Example prompts for the agent

  • /svelte:test-fix — my component tests fail with Cannot access before initialization
  • /svelte:test-fix — the E2E test can't find the button after navigation
  • /svelte:test-fix — tests pass locally but fail in CI

How to install svelte-test-fix

1claude-code-templates

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

2Manually: put the files in place

.claude/commands/svelte-test-fix.md

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

Questions about svelte-test-fix

How do I install svelte-test-fix in Claude?

Run npx claude-code-templates@latest --command svelte/svelte-test-fix; the command lands at .claude/commands/svelte-test-fix.md.

What does svelte-test-fix do?

It diagnoses why Svelte and SvelteKit tests fail, checks recent code changes, and proposes fixes for timing, selectors, mocks and environment configuration.

Which test types does it handle?

Component tests, Playwright E2E tests, and environment problems such as import paths, the test tsconfig, missing globals and build conflicts.

Source text

svelte-test-fix.md · MIT
---
description: "Troubleshoot and fix failing tests in Svelte/SvelteKit projects, including debugging test issues and resolving common testing problems."
---

# /svelte:test-fix

Troubleshoot and fix failing tests in Svelte/SvelteKit projects, including debugging test issues and resolving common testing problems.

## Instructions

You are acting as the Svelte Testing Specialist Agent focused on fixing test issues. When troubleshooting tests:

1. **Diagnose Test Failures**:
   - Analyze error messages and stack traces
   - Identify failure patterns (flaky, consistent, environment-specific)
   - Check test logs and debug output
   - Review recent code changes

2. **Common Test Issues**:
   
   **Component Tests**:
   - Async timing issues → Use `await tick()` or `flushSync()`
   - Component not cleaning up → Ensure proper unmounting
   - State not updating → Check reactivity and bindings
   - DOM queries failing → Use proper Testing Library queries
   
   **E2E Tests**:
   - Timing issues → Add proper waits and assertions
   - Selector problems → Use data-testid attributes
   - Navigation failures → Check route configurations
   - API mocking issues → Verify mock setup
   
   **Environment Issues**:
   - Module resolution → Check import paths
   - TypeScript errors → Verify test tsconfig
   - Missing globals → Configure test environment
   - Build conflicts → Separate test builds

3. **Debugging Techniques**:
   ```javascript
   // Add debug helpers
   const { debug } = render(Component);
   debug(); // Print DOM
   
   // Component state inspection
   console.log('Props:', component.$$.props);
   console.log('Context:', component.$$.context);
   
   // Playwright debugging
   await page.pause(); // Interactive debugging
   await page.screenshot({ path: 'debug.png' });
   ```

4. **Fix Strategies**:
   - Isolate failing tests
   - Add detailed logging
   - Simplify test cases
   - Mock external dependencies
   - Fix timing/race conditions

5. **Prevention**:
   - Add retry logic for flaky tests
   - Improve test stability
   - Set up better error reporting
   - Create test utilities

## Example Usage

User: "My component tests are failing with 'Cannot access before initialization' errors"

Assistant will:
- Analyze the test setup
- Check component lifecycle
- Identify initialization issues
- Fix async/timing problems
- Add proper test utilities
- Ensure cleanup procedures
- Provide debugging tips

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

Similar slash commands

Everything for Testing and QA →

From the same set205

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