Skip to Content
Skillsfrontend-test

frontend-test

Generate component tests for existing components — for code written without tests, or where coverage needs expanding beyond what frontend-component produced.

Triggers

Natural-language phrases that auto-invoke the skill:

  • “test this component”
  • “write component test”
  • “add component test”
  • “test component [name]”
  • “component tests for [name]“

What it does

  • Queries the knowledge graph for established test conventions (RTL vs Enzyme, snapshot policy, a11y patterns)
  • Reads the component in full so tests cover actual behavior — props, events, conditional rendering
  • Detects the framework and runner from package.json (React Testing Library / Vue Test Utils, Vitest / Jest)
  • Generates a colocated test file covering rendering, interactions (via userEvent), and at least one accessibility check
  • Prefers getByRole / getByLabelText over getByTestId; only writes snapshot tests when peer tests already use them
  • Runs the suite to verify tests pass, then emits an execution summary to the knowledge graph

Example

"Write component tests for src/components/SearchBar.tsx"

Reads SearchBar, detects RTL + Vitest, and writes SearchBar.test.tsx with rendering, interaction, and accessibility cases — verified passing.

frontend-componentvisual-regression