component-testing-patterns
About
This skill provides patterns for testing Svelte 5 components using Vitest's browser mode with real Playwright browsers. It emphasizes accessibility-focused locators (getByRole, getByLabelText) and reactive state testing instead of jsdom simulations. Use it when you need to write component tests that interact with actual browser environments and follow accessibility best practices.
Quick Install
Claude Code
Recommended/plugin add https://github.com/majiayu000/claude-skill-registrygit clone https://github.com/majiayu000/claude-skill-registry.git ~/.claude/skills/component-testing-patternsCopy and paste this command in Claude Code to install this skill
Documentation
Component Testing Patterns
Quick Start
import { page } from 'vitest/browser';
import { render } from 'vitest-browser-svelte';
render(Button, { label: 'Click' });
await page.getByRole('button', { name: 'Click' }).click();
await expect.element(page.getByRole('button')).toBeInTheDocument();
Core Principles
- Locators, never containers:
page.getByRole()auto-retries - Semantic queries:
getByRole(),getByLabelText()for accessibility - Await assertions:
await expect.element(el).toBeInTheDocument() - Real browsers: Tests run in Playwright, not jsdom
Common Patterns
- Locators:
page.getByRole('button'),.first(),.nth(0),.last() - Interactions:
await input.fill('text'),await button.click() - Runes: Use
.test.svelte.tsfiles,flushSync(),untrack() - Files:
*.svelte.test.ts(browser),*.ssr.test.ts(SSR),*.test.ts(server)
References
- setup-configuration.md - Complete Vitest browser setup
- testing-patterns.md - Comprehensive testing patterns
- locator-strategies.md - Semantic locator guide
- troubleshooting.md - Common issues and fixes
GitHub Repository
Related Skills
content-collections
MetaThis skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.
evaluating-llms-harness
TestingThis Claude Skill runs the lm-evaluation-harness to benchmark LLMs across 60+ standardized academic tasks like MMLU and GSM8K. It's designed for developers to compare model quality, track training progress, or report academic results. The tool supports various backends including HuggingFace and vLLM models.
langchain
MetaLangChain is a framework for building LLM applications using agents, chains, and RAG pipelines. It supports multiple LLM providers, offers 500+ integrations, and includes features like tool calling and memory management. Use it for rapid prototyping and deploying production systems like chatbots, autonomous agents, and question-answering services.
cloudflare-turnstile
MetaThis skill provides comprehensive guidance for implementing Cloudflare Turnstile as a CAPTCHA-alternative bot protection system. It covers integration for forms, login pages, API endpoints, and frameworks like React/Next.js/Hono, while handling invisible challenges that maintain user experience. Use it when migrating from reCAPTCHA, debugging error codes, or implementing token validation and E2E tests.
