skills.rest
bovinphang
bovinphangCOMMUNITY
Explore all skills by this author →
GitHub

fec-component-testing

Write and audit UI component tests for props, emits, interactions, and accessibility.

21|3|Updated Mar 17, 2026
Search Tags:#ui#accessibility#react#vue#testing-library#component-testing
One-click install
npx skills add https://github.com/bovinphang/frontend-craft --skill fec-component-testing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fec-component-testing
Source: https://github.com/bovinphang/frontend-craft/tree/main/localized/zh-CN/skills/fec-component-testing
Command: npx skills add https://github.com/bovinphang/frontend-craft --skill fec-component-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Help developers validate UI components with near-code tests, covering props, emits, interactions, and accessibility checks.

Core Features & Use Cases

  • Unit, component, and lightweight integration tests for React and Vue codebases.
  • Covers props/emits, user interactions, accessibility queries, and mock boundaries.
  • Use cases include maintaining component contracts during refactors and preventing regressions.

Quick Start

Create a basic component test for a Button using React Testing Library.

Frequently Asked Questions about fec-component-testing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write UI component tests that verify props and emits?▼

UI component tests verify props and emits by applying deterministic Arrange-Act-Assert patterns. You validate component contracts and interactions to prevent regressions during refactors and ensure expected behavior.

Can I use Testing Library to check accessibility in React and Vue?▼

Testing Library supports accessibility queries across React and Vue codebases. You query elements by accessible roles and names to ensure interactions and UI states remain inclusive and compliant.

What's the best way to structure mock boundaries in component testing?▼

The best way to structure mock boundaries in component testing is enforcing standard patterns for unit and micro-integration tests. You isolate hooks and composables with mocks to maintain deterministic tests and clear interaction verification.

Why does my component test fail when checking user interactions?▼

Component tests fail when checking user interactions if they lack deterministic behavior or proper mock boundaries. You must audit emits and interactions using standard patterns to prevent flaky results and ensure actionable guardrails.

Do I need unit tests or component tests to prevent UI regressions?▼

You need component tests to prevent UI regressions by validating props, emits, and accessibility queries. Unit and micro-integration tests cover hooks and composables, ensuring near-code validation during refactors.

Related Skills

Explore More Software Engineering Skills→
BabakBarBabakBar

Mobile Testing

Assess React Native testing requirements and configure Jest with React Native Testing Library.

Community
Intermediate
mvillmowmvillmow
18

quality-coverage-report

Generate HTML and terminal coverage reports for Python pytest runs.

Community
Intermediate
alexgorbatchevalexgorbatchev
1

storybook

Automates Storybook story creation and Playwright play tests for UI components.

Community
Intermediate
voidrotvoidrot

e2e-testing-patterns

Provides actionable patterns for designing and maintaining Playwright and Cypress end-to-end browser tests.

Community
Advanced