Which sequence describes testing a React component with React Testing Library?

Which sequence describes testing a React component with React Testing Library?

• A. Render the component, query for elements by role/text/label, simulate user events with userEvent or fireEvent, and assert outcomes.
• B. Replace the component's logic with unit tests only and ignore the DOM.
• C. Test only the static HTML without interactions.
• D. Only snapshot test the component.

Answer: (A)

Testing a React component with React Testing Library focuses on how the component behaves for a user. The typical flow is to render the component in the test DOM, find elements using accessible queries like role, text, or label, simulate user actions with userEvent or fireEvent, and then assert what changes on the screen or what callbacks are triggered. Rendering gives you the real DOM the user would see. Querying by accessible attributes mirrors how a user (including assistive tech) interacts with controls, so you’re testing the observable behavior rather than internal implementation details. Simulating events with userEvent (or fireEvent) fires the same event handlers the app uses in production, and userEvent often provides a closer, more realistic sequence of actions. Finally, assertions confirm that the UI updates correctly, messages appear, or side effects occur as a result. Other approaches don’t capture the user-facing behavior. Replacing the component’s logic with unit tests and ignoring the DOM misses how it actually renders and responds to interaction. Testing only static HTML neglects how the UI changes after user actions. Relying solely on snapshot tests checks structure at a single moment but doesn’t verify how the component behaves under user interactions.

Testing a React component with React Testing Library focuses on how the component behaves for a user. The typical flow is to render the component in the test DOM, find elements using accessible queries like role, text, or label, simulate user actions with userEvent or fireEvent, and then assert what changes on the screen or what callbacks are triggered. Rendering gives you the real DOM the user would see. Querying by accessible attributes mirrors how a user (including assistive tech) interacts with controls, so you’re testing the observable behavior rather than internal implementation details. Simulating events with userEvent (or fireEvent) fires the same event handlers the app uses in production, and userEvent often provides a closer, more realistic sequence of actions. Finally, assertions confirm that the UI updates correctly, messages appear, or side effects occur as a result.

Other approaches don’t capture the user-facing behavior. Replacing the component’s logic with unit tests and ignoring the DOM misses how it actually renders and responds to interaction. Testing only static HTML neglects how the UI changes after user actions. Relying solely on snapshot tests checks structure at a single moment but doesn’t verify how the component behaves under user interactions.