skills.rest
ESPlotter
ESPlotterOFFICIAL
Explore all skills by this author →
GitHub

tests-components

Validate renderer UI component tests with Testing Library conventions.

Updated Aug 27, 2026
Search Tags:#vitest#react#ui-testing#testing-library#component-testing#renderer#user-event
One-click install
npx skills add https://github.com/ESPlotter/ESPlotter --skill tests-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tests-components
Source: https://github.com/ESPlotter/ESPlotter/tree/main/.github/skills/tests-components
Command: npx skills add https://github.com/ESPlotter/ESPlotter --skill tests-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps teams validate user-visible renderer UI behavior using Testing Library, providing a consistent framework for test layout, naming, and reporting to keep component reviews fast and objective.

Core Features & Use Cases

  • Standardized file layout for renderer component tests within the renderer test tree.
  • Enforced testing conventions (getByRole/findByRole, userEvent, waitFor) and lifecycle-driven test structure.
  • Clear guidance on when to use component tests vs other test units and how to report outcomes in reviews.

Quick Start

Add renderer component tests under the renderer test tree following the file layout guidance and run npm run test:components to validate them.

Frequently Asked Questions about tests-components

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

FAQPage Schema
How do I structure renderer component tests using Testing Library?▼

Structure renderer component tests by placing them within the renderer test tree using a standardized file layout, enforcing lifecycle-driven test organization and consistent reporting for faster reviews.

What is the prescribed query order for component testing?▼

The prescribed query order for component testing prioritizes getByRole and findByRole queries to enforce public UI contracts, ensuring tests validate user-visible renderer behaviors objectively.

When should I use component tests instead of other test units?▼

Use component tests when validating render lifecycle, user interactions, and accessibility through user-visible UI behaviors, distinguishing these tests from other units by their focus on public UI contracts.

Does Testing Library require userEvent and deterministic fixtures for renderer tests?▼

Testing Library requires userEvent and deterministic fixtures to validate renderer UI behaviors, enforcing standardized testing conventions like waitFor to maintain consistent layout and reporting.

How do I run component tests in the renderer test tree?▼

Run component tests in the renderer test tree by adding test files following the layout guidance and executing npm run test:components to validate user-visible renderer UI behaviors.

What is the best way to validate accessibility in renderer component tests?▼

The best way to validate accessibility in renderer component tests is using Testing Library's role-based queries like getByRole and findByRole to enforce public UI contracts and standardize reporting.

Related Skills

Explore More Software Engineering Skills→
remotion-devremotion-dev
55.9k

web-renderer-test

Create and run visual snapshot tests for the Remotion web renderer.

Official
Advanced
helderbertohelderberto
114

test

Run npm tests and report failing names with file paths.

Community
Intermediate
0xBigBoss0xBigBoss
53

react-best-practices

Guide React hooks, effects, and component design in .tsx/.jsx codebases.

Community
Intermediate
vincent-kkvincent-kk
1

ui-plugin-guidelines

Identify UI library compatibility with the canard/schema-form plugin.

Community
Basic