citypaul/.dotfiles

Overview

This skill provides practical React Testing Library patterns for testing React components, hooks, context, forms, and edge cases like portals, suspense, and error boundaries. It emphasizes testing rendered output and user-visible behavior instead of implementation details. Use these patterns to write reliable, maintainable tests that align with modern RTL conventions.

How this skill works

The skill describes how to use render() and renderHook() to exercise components and hooks, how to wrap tests with providers via the wrapper option, and when to rely on userEvent for user interactions. It highlights RTL auto-wrapping of updates, automatic cleanup, and common anti-patterns to avoid so tests remain focused on what users see. Concrete examples cover controlled inputs, form submission, conditional rendering, loading/error states, portals, and suspense.

When to use it

• Testing component output and user interactions in React applications
• Validating custom hooks with renderHook and act where needed
• Testing components or hooks that rely on Context providers
• Verifying form behavior, validation, and submission flows
• Checking UI behavior for loading, error boundaries, portals, and Suspense

Best practices

• Treat components as functions: assert rendered DOM from props and interactions
• Use renderHook for hooks and wrapper to provide context providers
• Prefer userEvent for interactions and avoid unnecessary manual act() or cleanup() calls
• Avoid testing internal state, instance methods, or using shallow rendering
• Create per-test factory render functions instead of shared beforeEach renders

Example use cases

• Render a LoginForm, type credentials with userEvent, click submit, and assert onSubmit called with correct payload
• Use renderHook to test a useCounter hook with initial props and rerender to assert behavior changes
• Wrap a Dashboard with AuthProvider in a render helper and assert authenticated UI elements appear
• Simulate a server error response and assert an error message appears after submit
• Render a Modal that uses a portal and assert its content is present in the document