React Testing Library interview questions and answers

"The more your tests resemble the way your software is used, the more confidence they can give you." Test behaviour through what users see and do (roles, labels, text, clicks, typing), not implementation details such as state, props or component internals. Tests then survive refactors and catch real bugs.

getBy* returns the element or throws if there is none (or several): use it when the element must be there. queryBy* returns null when missing: use it to assert absence. findBy* returns a promise that retries until the element appears or a timeout: use it for async UI. Each has *AllBy* variants for many elements.

In priority order: getByRole (with name), getByLabelText, getByPlaceholderText, getByText, getByDisplayValue, then getByAltText and getByTitle, and getByTestId only as a last resort. Role queries also check that your markup is accessible.

fireEvent dispatches a single DOM event. @testing-library/user-event simulates full interactions as a browser would: typing fires keydown, keypress, input and keyup per character, clicking includes pointer and focus events, and it respects disabled elements. Prefer userEvent.setup() and await its methods.

Mock the API with MSW (or mock the fetch function), render the component, assert the loading state, then await screen.findByText(...) for the loaded data. Also test the error state by making the handler return an error.

Prefer role and label queries, which fail if elements are not accessible; add jest-axe for automated checks (expect(await axe(container)).toHaveNoViolations()); and test keyboard interaction with user-event tab and keyboard.

getByText finds any element containing the text. getByRole('button', { name: 'Save' }) finds a button whose accessible name is Save, which is stricter and more meaningful: it ensures the element is actually a button users and assistive technology can find.

Use await screen.findByText(...) for elements that appear later, or await waitFor(() => expect(...)) for other conditions. Use waitForElementToBeRemoved for loaders. Avoid wrapping everything in act manually; RTL's utilities already do it.

Mock at the network level with Mock Service Worker (MSW): define handlers that return fixture responses, so components and data libraries run unchanged. Override handlers per test for errors or empty states. Mocking fetch directly also works but couples tests to the client.

Write a custom render that wraps the UI in the needed providers, with a fresh store or QueryClient per test, and pass it options such as the initial route. Re-export everything from RTL with this render so tests stay short.

A state update happened after the test stopped waiting, often from an unawaited promise or timer. The fix is usually to await the resulting UI change with findBy or waitFor, or to await user-event calls, rather than adding act everywhere.

Use await user.tab() to move focus and expect(element).toHaveFocus(), await user.keyboard('{Enter}') or {ArrowDown} to trigger interactions, and check that focus moves and content updates as expected.

Open it through the UI, find it with getByRole('dialog', { name: ... }), assert focus moves inside, test closing with the close button and Escape, and assert it disappears with queryByRole returning null (or waitForElementToBeRemoved).

An async helper that waits until an element (such as a spinner) leaves the DOM. It fails immediately if the element is not present at the start, which catches tests that assume a loading state that never appeared.

Call const user = userEvent.setup() before rendering (or at the start of the test) and await every interaction such as await user.click(button). With fake timers, pass advanceTimers: jest.advanceTimersByTime.

Create a helper that wraps render with your providers (theme, router, store, query client), re-export everything from RTL with your render overriding the default, and import it in tests instead of the library.

Use fake timers, set up user-event with advanceTimers, then advance time inside act or use async timer helpers, and assert the result. Restore real timers after each test.

Find inputs by their labels, type with user-event, submit by clicking the button found by role, then assert on the visible result or on the mocked submit handler's arguments. Also test validation messages and disabled states.

Use renderHook from RTL, which renders the hook in a test component and gives result.current; wrap updates with act. Prefer testing hooks through components that use them when practical.

screen is bound to document.body, so you can query without destructuring from render. It keeps tests consistent and easier to read; within(element) scopes queries to part of the page.

Tests that check internal state, private methods or component structure break on harmless refactors and can pass while the UI is broken. Testing outputs users see gives fewer false failures and more real protection.

It scopes queries to a container element, for example within(screen.getByRole('row', { name: /Asha/ })).getByRole('button', { name: 'Edit' }), so you target the right element when the page repeats similar ones.

Use await user.selectOptions(screen.getByRole('combobox', { name: 'Country' }), 'India') for native selects. For custom comboboxes, type into the input, find the option with findByRole('option', { name }) and click it.

Pass a mock such as const onSave = jest.fn(), interact with the UI, then assert expect(onSave).toHaveBeenCalledWith(expectedData). This tests the component's contract without inspecting its internals.

It ties tests to markup and class names that users cannot see, so refactors break tests without changing behaviour. Role, label and text queries reflect how people use the UI.

Render a child that throws inside the boundary, suppress the expected console error with a spy, and assert that the fallback UI appears, and that a reset button recovers if the boundary supports it.

Find the file input by its label and call await user.upload(input, new File(['hello'], 'hello.txt', { type: 'text/plain' })), then assert input.files[0] and the resulting UI.

Custom matchers such as toBeInTheDocument, toBeVisible, toHaveTextContent, toBeDisabled, toHaveAttribute and toHaveAccessibleName, which make DOM assertions readable and give clearer failure messages.

screen.debug() prints the DOM, screen.logTestingPlaygroundURL() gives a link that suggests queries, and failing queries print the DOM and available roles.

It prints every element's implicit ARIA role in a container, helping you find the right getByRole query when you are unsure what role an element has.

1. AgetByTestId
2. BgetByRoleCorrect answer
3. Ccontainer.querySelector
4. DgetByClassName

Why: Role queries mirror how users and assistive technologies find elements.

1. AqueryByTextCorrect answer
2. BfindByText
3. CgetAllByText
4. DgetByText

Why: queryBy returns null instead of throwing.

1. AqueryBy
2. BfindByCorrect answer
3. CbyWait
4. DgetBy

Why: findBy returns a promise that retries.

1. AqueryByText
2. BgetAllByText
3. CfindByTextCorrect answer
4. DgetByText

Why: find queries return a promise.

1. Acontainer.querySelector('.btn')
2. BgetByTestId('save')
3. CgetByClassName('save')
4. DgetByRole('button', { name: 'Save' })Correct answer

Why: Role plus accessible name.

1. AWith fireEvent
2. BAwaited after userEvent.setup()Correct answer
3. CSynchronously
4. DInside setTimeout

Why: They are async.

1. A@testing-library/user-eventCorrect answer
2. Bjsdom
3. Cenzyme
4. DfireEvent

Why: user-event fires the full event sequence.

1. Aflush
2. Bretry
3. Cact
4. DwaitForCorrect answer

Why: waitFor polls the callback until it stops throwing.

1. ACypress
2. BMSWCorrect answer
3. CSinon
4. Dnock only in browsers

Why: Mock Service Worker intercepts requests.

1. AtoMatchObject
2. BtoEqual
3. CtoBeInTheDocumentCorrect answer
4. DtoHaveLength

Why: jest-dom adds DOM-specific matchers.

1. AtoHaveFocusCorrect answer
2. BtoBeActive
3. CtoBeFocused
4. DtoHaveSelection

Why: From jest-dom.

1. AwaitForElementToBeRemovedCorrect answer
2. BwaitForDomChange
3. Cwait
4. DflushPromises

Why: Fails if missing at start.

1. Auser.press('esc')
2. Bawait user.keyboard('{Escape}')Correct answer
3. CfireEvent.escape()
4. Ddialog.close()

Why: Simulates the key.

1. Aeslint-plugin-jsx-a11y only
2. BLighthouse
3. CStorybook
4. Djest-axeCorrect answer

Why: toHaveNoViolations.

1. ATo speed up React
2. BTo avoid assertions
3. CTo use enzyme
4. DTo wrap components in shared providersCorrect answer

Why: Theme, router, store.

1. Acontainer.query
2. Bscreen.scope()
3. Cwithin(element)Correct answer
4. Dinside()

Why: within binds queries to an element.

1. AuseRender
2. BrenderHookCorrect answer
3. CmountHook
4. DtestHook

Why: renderHook returns result.current.

1. AElements with id Save
2. BCSS class Save
3. CAny element with text Save
4. DA button whose accessible name is SaveCorrect answer

Why: The name option uses the accessible name.

1. AWhat the user sees and can doCorrect answer
2. BPrivate methods
3. CProp types
4. DComponent state

Why: Behaviour over implementation.

1. Auser.choose
2. BfireEvent.select
3. Cuser.pick
4. Duser.selectOptionsCorrect answer

Why: Pass the option value or label.

1. AfireEvent.file
2. Buser.drop
3. Cuser.uploadCorrect answer
4. Duser.attach

Why: Pass a File object.

1. Ascreen.debug
2. BprettyDOM
3. CprintRoles
4. DlogRolesCorrect answer

Why: Helps choose queries.

1. AIts render count
2. BIts source code
3. CThat it was called with the right dataCorrect answer
4. DIts internal variables

Why: Test the contract.

1. AIt throws
2. BUsers cannot see class namesCorrect answer
3. CIt is slower
4. DIt is deprecated

Why: Ties tests to implementation.

1. AdialogCorrect answer
2. Bmodal
3. Cpopup
4. Dregion

Why: Query with getByRole('dialog').

1. Ascreen.print()
2. Bconsole.dom()
3. Crender.log()
4. Dscreen.debug()Correct answer

Why: It logs a formatted DOM tree.

1. AUsed only once
2. BCalled synchronously
3. CAwaitedCorrect answer
4. DWrapped in act

Why: They return promises.

1. AgetByLabelText
2. BgetByTestIdCorrect answer
3. CgetByRole
4. DgetByText

Why: Test IDs are invisible to users.

1. ANo changes
2. BReal timers only
3. CfireEvent instead
4. DadvanceTimers option in setupCorrect answer

Why: Otherwise interactions hang.

1. AScopes queries to that elementCorrect answer
2. BRenders a new tree
3. CClicks the row
4. DMocks the row

Why: Targets repeated elements.