81. What is the recommended way to test user interactions in React?
- a) React Testing Library with user-event
- b) Enzyme's simulate() method
- c) Direct DOM manipulation
- d) Jest snapshots only
Answer: A - RTL + user-event closely mimics real user behavior.
82. How to implement animations in React?
- a) CSS transitions/animations
- b) React Spring/Framer Motion
- c) React Transition Group
- d) All of the above
Answer: D - Choice depends on complexity (CSS for simple, libraries for advanced).
83. What is the correct way to handle focus management for accessibility?
- a) useRef + useEffect to focus elements
- b) Auto-focus attributes
- c) react-focus-lock library
- d) Both A and C
Answer: D - Critical for keyboard users and screen readers.
84. How to test components that use Redux?
- a) Wrap in Provider with test store
- b) Mock useSelector/useDispatch
- c) Use Redux Toolkit's configureStore
- d) All of the above
Answer: D - Redux provides official testing utilities.
85. What is the purpose of ARIA attributes in React?
- a) Enhance accessibility for assistive tech
- b) Replace semantic HTML
- c) Improve performance
- d) Style components
Answer: A - Supplements HTML when native semantics aren't sufficient.
86. How to mock API calls in component tests?
- a) jest.mock + MSW (Mock Service Worker)
- b) Actual API calls in tests
- c) Redux middleware
- d) Browser fetch mocking
Answer: A - MSW intercepts network requests at runtime.
87. What is the correct pattern for render props?
- a) <Component render={(data) => (...)} />
- b) Higher-Order Components
- c) Context API
- d) All props passed as objects
Answer: A - Component exposes data via function prop (alternative to HOCs).
88. How to implement keyboard navigation in custom components?
- a) onKeyDown handlers with key codes
- b) react-aria hooks
- c) tabIndex attributes
- d) All of the above
Answer: D - react-aria provides pre-built accessible behaviors.
89. What is snapshot testing useful for?
- a) Detecting unexpected UI changes
- b) Validating business logic
- c) Testing performance
- d) Accessibility audits
Answer: A - Best for non-changing presentational components.
90. How to create accessible modal dialogs?
- a) react-aria/dialog
- b) Manual focus trapping
- c) aria-modal attribute
- d) All of the above
Answer: D - Must manage focus and prevent background interaction.
91. What is the purpose of React's act() in tests?
- a) Prepare components for assertions
- b) Group multiple state updates
- c) Both A and B
- d) Replace async/await
Answer: C - Ensures all updates are processed before assertions.
92. How to implement infinite scrolling?
- a) Intersection Observer API
- b) react-infinite-scroll-component
- c) Custom scroll event handlers
- d) All of the above
Answer: D - Libraries abstract edge cases like mobile/resize.
93. What is the purpose of React's StrictMode in tests?
- a) Detect legacy APIs and side effects
- b) Improve test performance
- c) Replace test assertions
- d) Enable experimental features
Answer: A - Highlights potential problems during development.
94. How to test components with React Router?
- a) MemoryRouter for tests
- b) Mock useNavigate/useParams
- c) Test in production only
- d) Both A and B
Answer: D - MemoryRouter avoids browser dependency.
95. What is the correct way to animate component mount/unmount?
- a) React Transition Group
- b) CSS keyframes with state
- c) Framer Motion's AnimatePresence
- d) All of the above
Answer: D - Framer Motion provides simplest API for exit animations.
96. How to implement accessible form validation?
- a) aria-invalid + live regions
- b) react-hook-form with error messages
- c) HTML5 validation attributes
- d) All of the above
Answer: D - Screen readers need clear error announcements.
97. What is the purpose of jest.fn() in React tests?
- a) Mock callback functions
- b) Track function calls
- c) Assert prop interactions
- d) All of the above
Answer: D - Mock functions verify component behavior.
98. How to implement smooth page transitions?
- a) React Router + CSS transitions
- b) Framer Motion layout animations
- c) React Three Fiber for 3D
- d) Both A and B
Answer: D - Shared layout components enable fluid transitions.
99. What is the purpose of toHaveStyle matcher?
- a) Assert CSS styles in tests
- b) Validate component props
- c) Check class names
- d) Measure render performance
Answer: A - Part of @testing-library/jest-dom extensions.
100. How to test component responsiveness?
- a) Resize browser in Cypress
- b) Jest + window.matchMedia mock
- c) Visual regression tools
- d) All of the above
Answer: D - Different tools serve different test phases.