Vitest for the fast inner loop. Playwright for the slow honest one.
Testing isn't a checkbox you tick before shipping. It's the moment you start trusting your own code without holding your breath.
9 tracks · 32 lessons · ~16h · difficulty: intermediate-to-advanced
Why test, what to test, when not to
Tests exist so you can change code without holding your breath. Before any framework, the question is — what are you trying to trust? Walk through the working-engineer view of why testing exists, the pyramid that shapes a sane test suite, and how to pick between Vitest, Playwright, Jest, and Cypress without ceremony.
Install, configure, assert, watch
Vitest is the fast inner loop where a test runs in 30 ms on every save. Get it installed, get the config right, learn the assertion vocabulary, and meet the watch + UI modes that turn testing into a feedback loop instead of a ceremony. Four lessons — by the end, Vitest runs against your project and stays out of your way.
Functions, modules, time, and the network
Mocking lets you isolate the unit under test from the rest of the universe — but every mock is a lie you've told your test, and that lie has costs. Learn the four kinds of mocks (function, module, time, network), the cases where each earns its keep, and the failure modes you'll hit when you overuse them. Four lessons.
RTL, queries, user-event, async
React Testing Library (RTL) flipped the script on component testing — instead of poking at internals, you query the rendered DOM the way a user would. Get RTL wired into Vitest, learn the query priority that catches bugs without breaking on refactors, drive interactions with user-event, and handle async state without resorting to waitFor everywhere. Four lessons.
Things you reach for on the second pass
The advanced track covers the parts you don't need on day one but become essential by week two — coverage reporting (and what NOT to measure), parametrized tests for table-driven verification, custom matchers that make assertion messages legible, and the type-safe testing patterns that make refactors painless. Three lessons.
Install, configure, record, debug
Playwright is the outer loop where a real Chromium / Firefox / WebKit clicks real buttons on your real app. Get the install right, write a config that works in dev AND CI, learn the codegen + headed-debug + UI-mode + trace-viewer toolkit, and feel what 'I trust this test' is like when the test IS the browser. Four lessons.
Role-based, web-first, auto-waiting
Locators are the single biggest reason Playwright tests stay green. They retry, they auto-wait, and they default to accessibility-first queries — but only if you write them that way. This track covers the role-based selector hierarchy, web-first assertions that retry until they pass or fail, the auto-wait model that means you almost never `sleep`, and the anti-flake habits that keep your suite trustworthy. Four lessons.
The parts that take a Playwright suite from working to shippable
Day-one Playwright tests run against a live app and work. Production-grade Playwright suites also mock network calls deterministically, reuse authentication across tests so log-in isn't every test's first 30 seconds, ride custom fixtures that hide setup, and run sharded in CI under 10 minutes. Four lessons to bridge from 'works' to 'we trust this in CI.'
Decide what to test, then apply it to your own project
Eight tracks of tools and patterns. The epilogue asks the harder question: now that you can test almost anything, what SHOULD you test? Two short lessons close the loop. The first gives you a decision framework for spending your testing budget — unit vs integration vs E2E vs 'no test.' The second walks through Pippa's own frontend test suite as a living example of these principles applied for real.
No comments yet — be the first.