React Testing Library is a testing utility that encourages testing components as users would use them. It focuses on testing behavior rather than implementation details, promotes accessibility, and helps write more maintainable tests.
Use @testing-library/react-hooks with renderHook, test different scenarios and state changes, verify hook behavior and side effects. Consider proper cleanup and isolation.
Provide test store using Provider, mock store state and actions, test component integration with Redux. Consider proper store setup and cleanup.
Test form submissions, validation logic, error states, and user interactions. Use userEvent for form interactions, verify form state and submissions. Consider accessibility testing.
Test animation triggers and completion, verify state changes during transitions, mock timers appropriately. Consider animation cleanup and timing issues.
Mock File API, test upload handlers, verify file validation and processing. Consider different file types and error scenarios.
Test different render conditions, verify component visibility, check render logic. Consider edge cases and state combinations.
Test error scenarios, verify error messages and UI, check error recovery. Consider different types of errors and handling mechanisms.
Simulate events using fireEvent or userEvent, verify handler calls and state changes, test different event scenarios. Consider proper event cleanup and async operations.
Shallow rendering tests component in isolation without rendering child components, while mount rendering fully renders component and children. Each has different use cases and performance implications.
Use MemoryRouter for testing, mock route params and navigation, test route rendering and transitions. Consider history manipulation and location changes.
Simulate errors to test boundary behavior, verify fallback UI rendering, test error recovery. Consider different error scenarios and component hierarchy.
Mock external dependencies, API calls, and complex functionality. Use jest.mock() appropriately, maintain mock clarity. Consider partial mocking and mock cleanup.
Use jest-axe for accessibility testing, verify ARIA attributes, test keyboard navigation. Consider screen reader compatibility and accessibility guidelines.
Group related tests, maintain clear test structure, use proper naming conventions. Consider test maintainability and readability.
Test useEffect behavior, verify cleanup functions, handle async side effects. Consider proper timing and isolation of side effects.
Use tools like Percy or Chromatic, compare visual changes, maintain visual consistency. Consider different viewport sizes and browser compatibility.
Test render counts, verify memoization effectiveness, check optimization implementations. Consider performance measurement and monitoring in tests.
Test portal rendering and content, verify portal functionality and events. Consider DOM structure and cleanup.
Main testing libraries include Jest (test runner and assertion library), React Testing Library (component testing), Enzyme (component testing), Cypress (E2E testing), and React Test Renderer (snapshot testing). Each serves different testing needs and approaches.
Use async/await with act(), waitFor(), or findBy queries. Handle promises, timers, and API calls properly. Test loading states, success cases, and error scenarios. Consider cleanup and proper test isolation.
Snapshot testing captures a serialized version of component output and compares it against future changes. Useful for detecting unintended UI changes, but should be used carefully to avoid brittle tests.
Test component interactions, data flow between components, state management integration. Focus on user workflows and feature completeness. Consider proper test isolation.
Wrap components in test providers, test context updates and consumption, verify context-based rendering. Consider proper context setup and cleanup.
Use Cypress or Playwright for end-to-end testing, test complete user flows, verify application integration. Consider test stability and maintenance.
Test hook behavior and state changes, verify hook side effects, use appropriate testing utilities. Consider hook lifecycle and cleanup.
Test components with different props and configurations, verify component flexibility and adaptation. Consider edge cases and prop combinations.
Test loading states, verify component lazy loading, check suspense fallbacks. Consider network conditions and timing.
Test state updates and transitions, verify state synchronization, check state persistence. Consider complex state scenarios and side effects.
