Claude-skill-registry component-testing-patterns

Vitest browser mode component testing. Use for testing Svelte 5 components with real browsers, locators, accessibility patterns, and reactive state.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/component-testing-patterns" ~/.claude/skills/majiayu000-claude-skill-registry-component-testing-patterns && rm -rf "$T"

manifest: skills/data/component-testing-patterns/SKILL.md

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.ts
```
files,
```
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