VitestTesting LibraryAdvanced~4h

Frontend Testing

Tests that mean something

A suite that has been green all week is a claim about four decisions somebody made: which level to test at, how to find things on the page, where to put the double, and what to do when it fails one run in twenty. This is the practice behind all four.

Start this project See the modules

Modules: 4
Drills: 10
Build steps: 4
Time: ~4h

Walk out able to

Put a guard at the level a defect actually lives at, find a control the way a user does, and name a flaky test's cause from its symptom rather than re-running it.

What you practise

Pick the level

Where a defect lives, and what each failure is worth.

Query the accessible tree

Roles, names, and what each variant hands back.

Cut the seam

Where a double belongs, and the hole it leaves.

Diagnose a flake

Time, order, shared state, races, drift.

The pitch

What you practise, and what you leave with

A suite built from nothing, a stub you watch drift away from its real counterpart, and a flake report: diagnosed, repaired, and proved gone.

You will practise

Which level a defect should be caught at
Choosing a query, and predicting its return
Where a double goes, and what it hides
Naming a flake from its symptom

Afterwards you can

Pick the level a defect actually lives at
Find a control the way a user finds it
Say what a double stopped proving
Diagnose a flake instead of re-running it

Modules

4 modules, 27 items

Lessons explain one idea. Drills repeat it until it sticks. Build steps make something that exists afterwards.

1
Put the test where the bug is
~54 min
Name the lowest level that would have caught a defect, and what its failure would say.
- LessonWhy a green suite is a claim5 min
- LessonWhat each level of test can see7 min
- LessonWhy a suite's shape goes wrong6 min
- DrillName the lowest level that catches it10 min
- DrillRead what a test actually touches12 min
- Build stepRun a test and watch it fail8 min
- Build stepRead the failure back to the bug6 min
2
Find it the way a person would
~59 min
Query a rendered component through the accessible tree, and predict what comes back.
- LessonWhat a query hands back6 min
- LessonRole queries read the tree6 min
- LessonThe name option is not the text6 min
- DrillChoose the query for what is there10 min
- DrillPredict what the query hands back12 min
- DrillWork out what name has to match11 min
- DrillSpot the line that lies8 min
3
Cut the seam and count the cost
~54 min
Put a double on the right boundary, and name what the test stopped proving.
- LessonPut the double on the right edge7 min
- LessonWhat a double stops proving6 min
- LessonAssert on the result, not the call5 min
- DrillChoose where the seam goes10 min
- DrillFind what the double stopped proving13 min
- Build stepStub the data and watch it pass6 min
- Build stepWatch a contract move under a stub7 min
4
Why tests go flaky
~1h
Diagnose an intermittent failure from its symptom, and repair it instead of retrying.
- LessonFive ways a green suite lies7 min
- LessonThe flake the taxonomies miss5 min
- LessonA retry is a report, not a repair6 min
- DrillName a flake from its symptom11 min
- DrillRepair a flake instead of retrying13 min
- LessonWrite the flake report20 min