Agent skill
typescript-component-testing
Jest, Vitest, and React Testing Library patterns for component testing. PROACTIVELY activate for: (1) Writing React component tests, (2) Using Testing Library queries, (3) Testing user interactions, (4) Async component testing, (5) Accessibility-focused testing. Triggers: "jest", "vitest", "testing-library", "react test", "component test", "render", "screen", "userEvent"
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/typescript-component-testing
SKILL.md
TypeScript Component Testing Skill
Metadata (Tier 1)
Keywords: jest, vitest, testing-library, react, component test, render
File Patterns: *.test.tsx, *.spec.ts, *.test.js
Modes: testing_frontend
Instructions (Tier 2)
React Testing Library Philosophy
Core Principle: Test from user's perspective, not implementation
Query Priority
getByRole(accessible roles)getByLabelText(form elements)getByPlaceholderTextgetByTextgetByTestId(last resort)
Basic Test Pattern
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
test('submits login form', async () => {
const handleSubmit = jest.fn();
render(<LoginForm onSubmit={handleSubmit} />);
await userEvent.type(screen.getByLabelText(/email/i), '[email protected]');
await userEvent.type(screen.getByLabelText(/password/i), 'password123');
await userEvent.click(screen.getByRole('button', { name: /log in/i }));
expect(handleSubmit).toHaveBeenCalledWith({
email: '[email protected]',
password: 'password123'
});
});
Async Testing
test('loads and displays data', async () => {
render(<UserProfile userId="123" />);
// Wait for data to load
expect(await screen.findByText('John Doe')).toBeInTheDocument();
});
// Or with waitFor
await waitFor(() => {
expect(screen.getByText('John Doe')).toBeInTheDocument();
});
User Interactions (userEvent)
// Preferred: userEvent (realistic)
await userEvent.click(button);
await userEvent.type(input, 'text');
await userEvent.selectOptions(select, ['option1']);
// Avoid: fireEvent (low-level)
fireEvent.click(button);
Anti-Patterns
- Testing implementation details (state, methods)
- Using container.querySelector
- Not waiting for async updates
- Manually wrapping in act()
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?