frontend-testing

npx skills add cosmicstack-labs/mercury-agent-skills --skill frontend-testing --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

# Frontend Testing Complete testing strategy for frontend applications — from unit tests to visual regression to E2E. ## Testing Pyramid ``` ╱ E2E ╲ ╱ Few, critical paths ╲ ╱─────────╲ ╱ Smoke tests, auth ╲ ╱ Integration ╲ ╱ Component + feature ╲ ╱───────────────╲ ╱ User interaction flows ╲ ╱ Unit + Component ╲╱ Logic, rendering, hooks ╲ ╱────────────────────╲╱ Fast, many, isolated ╲ ``` ## Test Types ### Unit Tests (Vitest + Testing Library) ```tsx import { render, screen, fireEvent } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { Button } from './Button'; describe('Button', () => { it('renders with text', () => { render(<Button>Click me</Button>); expect(screen.getByText('Click me')).toBeInTheDocument(); }); it('handles click events', async () => { const onClick = vi.fn(); render(<Button onClick={onClick}>Click</Button>); await userEvent.click(screen.getByText('Click')); expect(onClick).toHaveBeenCalledTimes(1); }); }); ``` ### Integration Tests ```tsx import { render, screen, waitFor } from '@testing-library/react'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ProductsList } from './ProductsList'