Frontend Testing

Choosing the level by what it can actually prove: pure logic, component behaviour, critical user flow, visual appearance, and the accessibility checks a tool cannot finish.

Choosing the Test Level

Pure logic, component behaviour, critical user flow, visual appearance and accessibility are five different observations. The level is chosen by what the failure would look like, not by a pyramid.

Q · Which kind of test would actually have caught this bug, and what is that kind of test structurally unable to see?
Testing Pure Logic

The cheapest, fastest and most reliable tests you will ever write — and the reason to get logic out of components so that it can be tested this way at all.

Q · Which parts of my frontend can be tested with no browser, no mounting and no waiting, and how do I get more of it there?
Component Testing

Given a rendered component, when the user interacts, then visible behaviour changes. Querying by role and accessible name is both better practice and an accessibility check you get for free.

Q · How do I test what a component does for a person, without testing how it happens to be implemented?
End-to-End Testing

A real browser over the flows you cannot ship broken — signup, login, checkout, payment, upload, critical navigation — and an honest account of what that costs.

Q · Which flows justify a real browser driving a real stack, and what will that suite cost me every week for the rest of the project?
Visual Regression Testing

The only level that observes what the browser painted — and a genuinely high-maintenance one, paid for in baselines and false positives from fonts, animation and dynamic content.

Q · How do I catch the breakages that no assertion describes, without drowning in image diffs that mean nothing?
Accessibility Testing

Automated rules catch a real but limited fraction of accessibility defects — and the ones they cannot decide are the ones that stop people using the product. Keyboard and screen-reader passes are not optional.

Q · What can an automated accessibility check actually decide, and what must a person still do by hand?