svelte-test-fix — команда для Claude Code: чинит падающие тесты Svelte
Слэш-команда для Claude, которая разбирает падающие тесты в Svelte и SvelteKit и предлагает исправления. Пригодится, когда тесты сыпятся после правок компонентов.
npx claude-code-templates@latest --command svelte/svelte-test-fixЧто делает svelte-test-fix
Команда включает режим специалиста по тестированию Svelte. Агент читает сообщения об ошибках и стек-трейсы, ищет закономерность: тест падает всегда, только в определённом окружении или через раз. Дальше смотрит свежие изменения в коде — часто причина там.
Внутри разбор по трём группам. Для компонентных тестов это тайминги асинхронности, очистка после размонтирования, реактивность и биндинги, запросы к DOM. Для E2E — ожидания, селекторы через data-testid, конфигурация маршрутов и моки API. Отдельно окружение: пути импортов, tsconfig для тестов, глобальные переменные, конфликты сборок. В качестве приёмов отладки команда советует debug() из Testing Library, вывод состояния компонента и page.pause() в Playwright.
Стратегия починки простая: изолировать падающий тест, добавить логирование, упростить кейс, замокать внешние зависимости. Для нестабильных тестов предлагается retry. Учтите: команда рассчитана на проекты, где тесты уже настроены — если у вас нет ни тест-раннера, ни Playwright, сначала придётся их поставить.
Какие задачи решает
- разобрать стек-трейс упавшего компонентного теста
- починить тест, который падает через раз
- найти причину ошибки Cannot access before initialization
- настроить ожидания и селекторы в E2E-тестах на Playwright
- убрать конфликты сборки тестов с основной сборкой
Примеры запросов агенту
- /svelte:test-fix — компонентные тесты падают с ошибкой Cannot access before initialization
- /svelte:test-fix — E2E-тест не находит кнопку после навигации
- /svelte:test-fix — тест проходит локально, но падает в CI
Как установить svelte-test-fix
1Через claude-code-templates
npx claude-code-templates@latest --command svelte/svelte-test-fix2Вручную: положить файлы
.claude/commands/svelte-test-fix.mdВызов — /svelte-test-fix. Для всех проектов — ~/.claude/commands/
Вручную: положить файлы
~/.codex/prompts/svelte-test-fix.mdВызов — /prompts:svelte-test-fix. В Codex этот формат помечен устаревшим, замена — скиллы
Вручную: положить файлы
.github/prompts/svelte-test-fix.prompt.mdВручную: положить файлы
.gemini/commands/svelte-test-fix.tomlGemini хранит команды в TOML: текст запроса — в поле prompt
Вопросы о svelte-test-fix
Как установить svelte-test-fix в Claude?
Выполните npx claude-code-templates@latest --command svelte/svelte-test-fix, после чего файл появится по пути .claude/commands/svelte-test-fix.md.
Что делает svelte-test-fix?
Разбирает причины падения тестов в Svelte и SvelteKit, проверяет свежие изменения в коде и предлагает исправления для таймингов, селекторов, моков и конфигурации окружения.
Какие типы тестов она разбирает?
Компонентные тесты, E2E на Playwright и проблемы окружения: пути импортов, tsconfig для тестов, глобальные переменные, конфликты сборок.
Исходный текст
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