This Claude skill automates the creation of comprehensive test suites using modern frameworks like Vitest, React Testing Library, and Playwright. It helps developers ensure code reliability and maintainability by generating unit, component, and E2E tests that follow accessibility best practices and industry-standard patterns.

When should I use testing?

testing is useful in the following scenarios: • Generating unit tests for complex utility functions and custom React hooks to verify logic and state transitions. • Creating component tests that simulate user interactions (clicks, typing) and verify DOM rendering using accessibility-first queries. • Expanding test coverage for existing codebases to meet quality benchmarks and prevent regressions. • Setting up End-to-End (E2E) test scripts with Playwright to validate critical user journeys and full-stack integration. • Implementing visual regression and interaction testing to ensure UI consistency across different browser environments.

name	testing
description	Write tests using Vitest and Testing Library. Use when asked to write tests, add test coverage, or test a component/function.

Testing Skill

When to Use

Writing unit tests
Testing React components
Adding test coverage
Testing custom hooks
E2E test scenarios

Test Types

Type	Tool	Purpose
Unit	Vitest + Testing Library	Component rendering, hooks, utilities
Component	Storybook + Vitest	Browser-based interaction testing
Visual	Playwright	Screenshot comparison
E2E	Playwright	Full user journeys

Process

Identify What to Test
- Component rendering
- User interactions
- State changes
- Edge cases and errors
Choose Query Method
- Prefer getByRole, getByLabelText, getByText
- Avoid CSS selectors and implementation details
Write Tests
- One concept per test
- Use descriptive names with should
- Test behavior, not implementation
Verify Coverage
- Run npm run test:coverage
- Aim for 80%+ coverage

Templates

See templates/ for test file templates.

Unit Test Template

import { render, screen } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';
import { Component } from './index';

describe('Component', () => {
  it('should render correctly', () => {
    render(<Component>Test</Component>);

    expect(screen.getByText('Test')).toBeInTheDocument();
  });

  it('should handle click events', async () => {
    const handleClick = vi.fn();

    render(<Component onClick={handleClick}>Click me</Component>);

    await userEvent.click(screen.getByRole('button'));

    expect(handleClick).toHaveBeenCalledOnce();
  });
});

Hook Test Template

import { renderHook, waitFor } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { useCustomHook } from './use-custom-hook';

describe('useCustomHook', () => {
  it('should return initial state', () => {
    const { result } = renderHook(() => useCustomHook());

    expect(result.current.value).toBe('initial');
  });
});

E2E Test Template

import { expect, test } from '@playwright/test';

test.describe('Feature', () => {
  test('should complete user flow', async ({ page }) => {
    await page.goto('/');

    await page.getByRole('button', { name: /start/i }).click();

    await expect(page).toHaveURL('/next-page');
  });
});

Query Priority

getByRole() - Best choice
getByLabelText() - Forms
getByText() - Content
getByTestId() - Last resort

Checklist

Tests focus on behavior, not implementation
Accessible queries used (getByRole, getByLabel)
Async operations properly awaited
Edge cases covered
No .only() or .skip() in committed code
Test names use should prefix

testing

When & Why to Use This Skill

Use Cases