Claude Code Plugins

Community-maintained marketplace

Feedback

component-testing-patterns

@spences10/devhub-crm
5
0

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

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

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

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