testing-library

Create user-centric UI tests for React, Vue, and Svelte using Testing Library.

18|Updated Jul 12, 2023

Search Tags:#vitest #testing #accessibility #react #components #jest #testing-library

Ready to run

npx skills add https://github.com/jaem1n207/synchronize-tab-scrolling --skill testing-library-jaem1n207

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: testing-library
Source: https://github.com/jaem1n207/synchronize-tab-scrolling/tree/main/.agents/skills/testing-library
Command: npx skills add https://github.com/jaem1n207/synchronize-tab-scrolling --skill testing-library-jaem1n207

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @testing-library/react, @testing-library/jest-dom, @testing-library/user-event, vitest, happy-dom, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers write robust and accessible UI tests by focusing on how users interact with components, rather than their internal implementation details.

Core Features & Use Cases

User-Centric Testing: Query elements by accessible roles, text, and labels.
Accessibility Focused: Catches accessibility issues by default.
Refactor-Resistant: Tests remain stable even when component implementation changes.
Use Case: Test a React login form by simulating user input for email and password, then clicking the sign-in button, ensuring the form behaves as expected from a user's perspective.

Quick Start

Use the testing-library skill to write tests for a React login form component.

Frequently Asked Questions about testing-library

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

FAQPage Schema

How do I test React components like a user would?▼

To test React components like a user, query elements by accessible roles, text, and labels rather than testing internal implementation details. This approach ensures your UI tests are robust, accessible, and resistant to refactoring.

What is the best way to write refactor-resistant UI tests?▼

The best way to write refactor-resistant UI tests is to focus on component behavior and query elements by accessible roles, text, and labels. This keeps tests stable even when internal implementation details change.

Does testing-library work with Vitest and happy-dom?▼

Yes, testing-library works with Vitest and happy-dom. The setup integrates @testing-library/react, @testing-library/jest-dom, and @testing-library/user-event with Vitest to facilitate user-centric UI component testing.

How do I test a React login form using user-centric queries?▼

To test a React login form, simulate user input for email and password using @testing-library/user-event, then click the sign-in button. Query elements by accessible labels and text to verify the expected form behavior.

Why should I query elements by accessible roles instead of test IDs?▼

Querying elements by accessible roles instead of test IDs catches accessibility issues by default and ensures your tests interact with components exactly as users do, making them robust against internal refactoring.