This is Part 4 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary Unit tests are where all testing begins. You put one function in front of you and nail down “this input produces this output” — the smallest, fastest kind of verification there is. This one article takes you from what a unit test actually is, through pure functions, the AAA pattern, and edge cases, with real code all the way. ...
This is Part 3 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary This is a start-to-finish walkthrough of wiring a testing environment into a React + Vite + TypeScript project — from an empty folder to the first passing test. We install Vitest, Testing Library, and jsdom, read the config line by line, turn the first test green, and map out where setup most often goes wrong. One article, complete setup. ...
This is Part 2 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary Last time we talked about why testing matters. Now for the practical question: “So… what do I test, and how much?” Time is finite, and you can’t test everything. This installment is really one question, answered in three pieces: how to pick the code that’s most worth testing what coverage numbers really mean — and where they lie the testing strategy we’ll use for our demo app A diagram contrasting a perfect coverage number with a test that verifies nothing — visited is not the same as verified What to test first Not all code carries the same weight. Top priority goes to code that changes often and hurts badly when it breaks. ...
This is the appendix to the “Frontend Testing, Done Right” series. Whenever you hit an unfamiliar term in the series, come back here. Browse the full series Learning frontend testing means getting buried in unfamiliar words. How is a mock different from a stub? When do getBy and queryBy part ways? Why shouldn’t you take a coverage number at face value? This one page collects all of those terms — and each entry goes beyond “what it is” to “why it matters” and “when you’d use it.” ...
This is Part 1 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary “Tests? But it already works.” We’ve all said it — or heard it. I said it for years. Look at the screen, click around, “yep, works,” done. But then the features pile up, and every time you touch the code a little voice asks, “if I change this, what breaks over there?” That creeping anxiety is exactly the moment tests become worth their price. ...
Introduction When people hear “accessibility testing,” they often think of a checklist: “Does this button have alternative text?” “Is the contrast ratio high enough?” WCAG 2.2 is built around clear pass/fail checks like these. WCAG 3.0 moves toward a broader unit of evaluation, aiming to consider overall user experience quality. That shift naturally changes how we test. We now combine fine-grained checks (Atomic) with real-world contextual evaluation (Holistic). This shift directly connects to the score-based conformance model discussed in WCAG 3.0 Conformance Model: Beyond A/AA/AAA. The weight you give each test type can change the score and the level you reach. ...