Question 1

What is the philosophy of React Testing Library (RTL), and how does it differ from the old Enzyme tests?

Accepted Answer

RTL tests components as real users interact with them (using text, buttons, and accessibility roles), instead of testing internal implementation details such as State and Class Methods.

Question 2

How do getBy, queryBy, and findBy queries differ in React Testing Library?

Accepted Answer

getBy immediately returns an element or throws if missing; queryBy returns null if missing (useful for checking absence); findBy is asynchronous and waits for an element to appear (for Promises and animations).

Question 3

Why prefer userEvent over fireEvent when testing user interactions?

Accepted Answer

userEvent simulates a full sequence of realistic browser events (such as hover, focus, keydown, and input), while fireEvent triggers only the target event in isolation.

Question 4

What is Mock Service Worker (MSW), and why is it the gold standard for testing API requests in React?

Accepted Answer

MSW intercepts requests at the Network Layer with a Service Worker or Node.js interceptors without changing the application's original fetch calls.

Question 5

What is the common "act(...) warning", why does it appear, and how should you fix it?

Accepted Answer

It appears when a component state update happens outside act(), usually because an asynchronous operation (Promise or Timer) finishes after the test has stopped checking.

Question 6

How do you test a Custom Hook separately with RTL's renderHook?

Accepted Answer

Call renderHook(() => useCustomHook()), which creates a test component to run the Hook and returns a result object with its current value and a rerender method.

Question 7

How do Component Tests differ from Playwright end-to-end (E2E) tests?

Accepted Answer

Component tests check an isolated UI unit in a simulated DOM environment (jsdom), while E2E tests run a real browser and test the full user journey across the server and real interface.

Question 8

How do you test components that depend on React Context without running the entire application?

Accepted Answer

Wrap the target component in the required Context.Provider inside render and supply test-specific mock data.

Question 9

What is Snapshot Testing, and what are the risks of overusing it?

Accepted Answer

It compares a component's DOM structure with a previously saved text snapshot; overuse leads to fragile tests that are updated automatically after every small change without reviewing what changed.

Question 10

How do you test accessibility in React components with axe-core?

Accepted Answer

Integrate jest-axe into component tests to scan the rendered DOM and confirm that it has no WCAG violations.