Testing

Use an async findBy* query, such as screen.findByText('Ada Lovelace'), and await it. It returns a promise that retries the query until the element appears or a default 1000 ms timeout expires; unawaited, you assert on a promise instead of the DOM.

Test ids are invisible to users, so a test-id-only suite proves markup exists rather than that the interface works. Querying by role, label or visible text makes the query itself verify the text and accessible name a real user relies on.

Queries are ranked by how closely they mirror how a real person finds a control: getByRole with an accessible name first, then getByLabelText, getByPlaceholderText, getByText and getByDisplayValue, then getByAltText and getByTitle, and getByTestId last.

fireEvent dispatches one synthetic DOM event. user-event replays the whole sequence a real interaction produces — pointer, mouse, focus and click events — and refuses to interact with elements a user could not touch, so it catches bugs fireEvent silently passes.

The warning reports that a component's state updated while React was outside an act() scope — almost always a promise resolving after the test's synchronous body finished. React Testing Library already wraps render, events and its async utilities in act, so the real fix is awaiting the UI change the promise causes.

Vue applies DOM updates asynchronously on the next tick rather than during the event handler. Vue Testing Library's fireEvent returns a promise that waits for that flush, so skipping the await asserts against the old DOM.

Vue Testing Library's render() hands back DOM queries instead of a Vue Test Utils wrapper, so there is no component instance, no setData, and no CSS-selector find to assert on. A test can only touch rendered output, which is what survives refactoring.

Drive the real form through its accessible controls, then assert on the recorded event: the render result exposes emitted(), keyed by event name with the arguments of each emission. An emitted event is the component's public contract with its parent, not an internal detail.

Supply the dependencies through render's mounting options — plugins for the router and store, provide for injected values — rather than reaching into the instance. Give real instances where you can, and fake only what crosses the network or cannot run in the test environment.

toJSON() returns a plain JavaScript object tree of the host elements React produced — each node has type, props and children, with text as plain strings. No DOM node is created, so the renderer runs anywhere React runs, including React Native.

react-test-renderer renders to fake host objects rather than to a DOM, so web tests never exercise the environment users get. React 19 deprecates it and logs a warning; move web tests to @testing-library/react and React Native tests to @testing-library/react-native.

Anything the host owns stays invisible: real event dispatch and bubbling, disabled or covered controls, focus and keyboard operation, form semantics, CSS-driven visibility and layout, and the accessibility tree. Calling a prop bypasses every gate a real user would have to pass.

There is no DOM node to attach, so react-test-renderer sets host refs to null by default. Pass the createNodeMock option to TestRenderer.create to return a stand-in object per host element — but a mocked focus() proves nothing about real focus behaviour.

Zero violations only means no enabled rule found a machine-decidable markup defect. Automated rules cannot judge whether names and alt text are meaningful, whether focus order and visibility work, or whether announcements arrive usefully — those need manual keyboard and screen-reader checks.

An implementation detail is anything a user cannot perceive: internal state, render counts, DOM structure, class names, which child components exist. The working rule is to assert only what a user would notice if it stopped being true.

Test a hook directly when its return value is the product: a shared hook whose callers are other developers. Test it through a consuming component when the hook exists to serve one component, because there the rendered output is what people depend on.

A snapshot asserts that the whole serialized output is identical to a recording; a targeted assertion states one thing a human decided must be true. Snapshots catch every change including irrelevant ones, so once they fail routinely for reasons unrelated to behaviour, they stop being evidence and become a rubber stamp.

An automated accessibility check evaluates a fixed set of rules against the component's rendered DOM and fails the test if any rule is violated. Passing means no enabled rule fired — not that the component is accessible.

Driving the login form repeats a slow, flake-prone flow that adds no coverage after the first test. Authenticate once through the app's auth API instead, save the resulting cookies and browser storage as a session, and start every test already signed in.

A structural CSS path couples the test to DOM nesting and styling class names, which change freely without changing behaviour. Anchor on what a user perceives — the element's role and visible name — or on an explicit test-id attribute the component deliberately exposes.

A fixed sleep hard-codes a guess about duration: too short and the test fails on a slow machine, too long and every run pays the delay. Wait on a retrying condition instead, which returns the moment the expected state appears.

A page object owns a screen's locators and user actions and returns data or locators; the test keeps the assertions and the scenario. Assertions buried in a shared helper hide what each test actually checks and make one test's expectations everyone's.

Role plus name is how a user identifies a control, so it changes only when the interface genuinely changes, and a test that cannot find the element usually reveals a real labelling gap. It breaks on unlabelled icon controls, non-semantic markup, duplicated names, and copy or locale churn.

Happy-path stubs leave the error and empty branches unexecuted, so bugs there ship unnoticed. Override the stub in one test so the endpoint fails, then assert the visible error message appears and the list does not.

An MSW handler pairs a predicate (method plus path, e.g. http.get('/api/users')) with a resolver function that returns a Response, usually built with HttpResponse.json(). Application code is untouched — MSW answers the real request at the network boundary.

Take control of when the stubbed response settles: either inject a delay into the handler, or hand the test a promise it resolves by hand. Assert the skeleton while the request is pending, release the response, then assert it is replaced by the data.

Generate types from the API schema as a build step and annotate every fixture with the generated type, so a renamed or removed field fails typecheck. That only catches shape changes present in the schema copy you last regenerated — never runtime values or semantics.

Mocking your own client deletes the code that talks to the server, so the test can only confirm your assumptions about it. Faking at the network boundary keeps that code running and replaces only the server, so request shape, parsing and error handling are exercised for real.

Forty-eight configurations per page, so 1,920 baselines — the axes multiply rather than add. The real cost is not disk: it is CI time, a multiplied flake surface, and above all the number of images a human must review and approve on every intentional design change.

Make the data deterministic at its source: freeze the clock and pin the timezone and locale, seed or stub the ID generator, and serve fixed fixtures. Mask only what you truly cannot control, such as a live third-party tile, because a mask is a permanent blind spot.

A fixed delay is a guess: on a loaded CI machine the shutter still lands mid-animation, and on a fast one it only wastes time. Remove the motion instead — inject test-only CSS that disables animations and transitions and hides the text caret.

Byte-equal screenshots almost never repeat: GPU rasterisation, text shaping and anti-aliasing shift pixel values without changing what a human sees. Visual tools instead decode both images, score each pixel pair with a perceptual colour distance, and count only differences above a tolerance.

Text rasterization is operating-system specific — hinting, anti-aliasing and the installed fallback fonts all differ — so a macOS baseline is simply not valid on Linux. Produce and compare baselines inside one pinned container image, used identically in CI and on developer machines.