Testing

What it does

This skill provides guidance and best practices for writing tests using React Testing Library. It emphasizes testing components as users would interact with them, focusing on accessibility-based queries and simulating user actions rather than directly testing implementation details. The goal is to create robust and maintainable tests that accurately reflect the user experience.

When to use it

• When developing or refactoring React components where you want to ensure test quality aligns with user interaction patterns.
• To learn and apply best practices for writing effective React Testing Library tests.
• When encountering challenges in creating reliable tests, particularly around asynchronous operations or simulating user events.
• For teams adopting or standardizing their approach to testing React components.

Key capabilities

• Query Prioritization: Provides a recommended order of queries (getByRole -> getByLabelText -> etc.) based on accessibility and user experience considerations.
• User Interaction Simulation: Encourages the use of userEvent for simulating user actions, avoiding direct event triggering with fireEvent.
• Asynchronous Handling: Promotes the use of findBy queries to explicitly wait for asynchronous operations to complete during tests.
• Best Practices & Anti-Patterns: Offers guidance on common pitfalls and recommended approaches for writing effective React Testing Library tests.

Example prompts

• "Show me the recommended order of queries in React Testing Library."
• "How do I simulate a user clicking a button using React Testing Library?"
• "Explain how to handle asynchronous operations when testing with React Testing Library."

Tips & gotchas

• This skill focuses specifically on React Testing Library. It's not applicable for other testing frameworks.
• Always await methods from userEvent.
• Prioritize accessibility-based queries (getByRole) whenever possible to ensure tests accurately reflect how users interact with the component.