Unit-Testing Subscribe to Unit-Testing RSS feed

This is Part 6 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary “I tested it with a mock” — that phrase actually bundles four different concepts (stub, spy, mock, fake) into one word. This single article sorts out those four terms, shows how one Vitest vi.fn() covers all of them, and settles the question of how far to go with faking. Sort it out once and your eye for reading and writing test code gets much sharper. ...

This is Part 5 of the “Frontend Testing, Done Right” series. Browse the full series · Glossary Real-world code waits. It waits for API responses; it waits for timers. That makes async testing the first wall most frontend developers hit — but the reason it feels hard boils down to a single question: “when do you verify?” Grade the answer sheet before the answer arrives, and you’re grading a blank page. This one article packs the complete toolkit for code that waits: Promise verification (resolves/rejects), fake timers, and the failure cases. ...

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 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. ...