pf-test-component_skill

Overview

This skill generates unit and integration tests for UI components in the PF DEV monorepo. It creates Vitest + React Testing Library test files alongside components and follows patterns for rendering, interaction, accessibility, edge cases, CVA variants, and composition. The output targets consistent, actionable tests that integrate with the repo structure.

How this skill works

The generator inspects the component folder and TypeScript sources to scaffold a .test.tsx file next to the component. It includes tests for rendering children and props, user interactions with vi mocks and fireEvent, accessibility assertions, edge cases such as ref forwarding and asChild behavior, and optional CVA variant coverage. For composed components it scaffolds tests validating subcomponents and context-driven states.

When to use it

• When adding a new UI component to packages/ui to ensure immediate test coverage.
• When refactoring a component to validate behavior and prevent regressions.
• When introducing CVA variants to verify class combinations and safety.
• When implementing composition patterns (e.g., Sidebar with subcomponents).
• When you need a quick, consistent test template that follows team conventions.

Best practices

• Place generated test files adjacent to the component (Component.test.tsx) to keep context local.
• Cover rendering, interactions, accessibility, and edge cases for each component.
• Use vi.fn() for handlers and assert calls with toHaveBeenCalled... matchers.
• Include CVA variant tests for components using variants.ts to validate all combos.
• Keep tests deterministic: prefer screen-based queries and avoid implementation details.

Example use cases

• Generate tests for a new Button component: children rendering, variants, sizes, click behavior, disabled state, keyboard activation.
• Create tests for a CVA-backed component to ensure no variant combination throws and default classes apply.
• Scaffold tests for a Sidebar composition to verify subcomponents render and context state propagation.
• Add edge-case tests such as ref forwarding and asChild rendering when integrating third-party elements.