Back to Commands

Svelte Test Fix

Commands svelte 69
Install Command
npx claude-code-templates@latest --command svelte/svelte-test-fix

Content

/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

Stack Builder

0 components

Your stack is empty

Browse components and click the + button to add them to your stack for easy installation.