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.
npx claude-code-templates@latest --command svelte/svelte-test-fixWhat 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-fix2Manually: put the files in place
.claude/commands/svelte-test-fix.mdCall it with /svelte-test-fix. For all projects use ~/.claude/commands/
Manually: put the files in place
~/.codex/prompts/svelte-test-fix.mdCall it with /prompts:svelte-test-fix. Codex marks this format deprecated in favour of skills
Manually: put the files in place
.github/prompts/svelte-test-fix.prompt.mdManually: put the files in place
.gemini/commands/svelte-test-fix.tomlGemini stores commands as TOML: the prompt text goes into the prompt field
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