npx claudepluginhub patternfly/ai-helpers --plugin pf-reactWant just this skill?
Then install: npx claudepluginhub u/[userId]/[slug]
Generate a comprehensive unit test file for the given React component.
This skill uses the workspace's default tool permissions.
Generate a comprehensive unit test file for the given React component.
Input
The user will provide a component file path or component code. Read the component source before generating tests.
How to Generate
- Identify what the component does: rendering, user interactions, conditional states, async operations.
- Look up any PatternFly components used so you understand their expected props and behaviors.
- Generate a complete test file covering all branches.
Test File Structure
import { describe, expect, it, beforeEach } from "@jest/globals";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
Organize tests into describe blocks: rendering, user interactions, conditional rendering, async operations, accessibility -- only include sections that apply.
Rules
Queries -- use in this order:
getByRole(always first choice)getByLabelTextgetByTextgetByTestId(last resort only)
Interactions -- always userEvent, never fireEvent:
const user = userEvent.setup();
await user.click(screen.getByRole("button", { name: "Save" }));
Mocking -- mock at the network boundary:
- Mock API calls and external services
- Never mock child components or PatternFly components
- Place all mocks at top of file
jest.clearAllMocks()inbeforeEach
Async -- prefer findBy* over waitFor for waiting on elements:
expect(await screen.findByText("Success")).toBeInTheDocument();
Use waitFor only for non-query assertions:
await waitFor(() => {
expect(onComplete).toHaveBeenCalled();
});
What to test:
- Your application logic and component composition
- All conditional rendering branches (loading, error, empty, populated)
- User interactions and their effects
- Callback invocations with correct arguments
What NOT to test:
- PatternFly component internals (they're already tested)
- Implementation details (state, internal functions)
- CSS classes or styling
Output
Output the complete test file ready to save. Name it ComponentName.test.tsx matching the source file.
Similar Skills
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.