React Testing and Debugging — Questions and Answers
Question 1: What is React Testing Library?
- A library of test examples
- A testing utility that encourages testing components the way users interact with them, focusing on behavior over implementation (Correct answer)
- A debugging tool
- A code linting tool
Correct answer: A testing utility that encourages testing components the way users interact with them, focusing on behavior over implementation
React Testing Library encourages tests that mirror user behavior, using queries like getByText and getByRole rather than testing internal component details.
Question 2: What is Jest?
- A comedian
- A JavaScript testing framework commonly used with React that provides assertions, mocking, and code coverage (Correct answer)
- A build tool
- A CSS framework
Correct answer: A JavaScript testing framework commonly used with React that provides assertions, mocking, and code coverage
Jest is the default testing framework for React projects, offering zero-config setup, snapshot testing, mocking capabilities, and built-in code coverage.
Question 3: What are React DevTools?
- Physical development tools
- A browser extension that lets you inspect React component hierarchy, props, state, and performance (Correct answer)
- A build system
- A code editor
Correct answer: A browser extension that lets you inspect React component hierarchy, props, state, and performance
React DevTools provides a visual interface to inspect component trees, examine props and state, profile performance, and debug React applications.
Question 4: What is a snapshot test?
- A photograph test
- A test that renders a component and compares the output to a previously saved reference to detect unintended changes (Correct answer)
- A performance test
- A visual test only
Correct answer: A test that renders a component and compares the output to a previously saved reference to detect unintended changes
Snapshot tests capture the rendered output and compare it against a stored snapshot. Differences are flagged, alerting you to unintended UI changes.
Question 5: What is error boundary in React?
- A fence around errors
- A component that catches JavaScript errors in child components, preventing them from crashing the entire app (Correct answer)
- An error type
- A debugging tool
Correct answer: A component that catches JavaScript errors in child components, preventing them from crashing the entire app
Error boundaries catch errors during rendering and display fallback UI instead of crashing. They use componentDidCatch and static getDerivedStateFromError.
Question 6: What is StrictMode in React?
- A production mode
- A development tool that highlights potential problems by running additional checks and warnings (Correct answer)
- A testing mode
- A performance mode
Correct answer: A development tool that highlights potential problems by running additional checks and warnings
StrictMode activates additional checks in development: detecting unsafe lifecycle methods, legacy APIs, and potential issues like side effects in renders.
React Testing and Debugging
What is React Testing Library?