/

Vitest

Vitest 5

Project PDF

Vitest: 0% done

Module 1 · What a test is, and why

You already test, by hand

Loading the slide…

A line of words about as long as a slide’s first line, and its second.

Another line, shorter.

1 / 216 · What a test is, and why

Course progress

0%

You already test, by hand
, 1 to practiseWithout tests, old bugs come back
, 1 to practiseA test is a small program that checks your program
A few words before any code
, 1 to practiseA test needs the right answer first
Small tests, bigger tests, whole-app tests
, 1 to practiseCatch each bug in the cheapest test that can see it
Vitest runs your tests and reports what failed
Recap

The terminal is where you type commands
, 1 to practiseNode runs JavaScript, npm installs packages
A project is a folder with a package.json
Install Vitest as a development dependency
, 1 to practiseFrom empty folder to Vitest
, 1 to practiseA script so everyone runs tests the same way
TypeScript works with no extra setup
, 1 to practiseTest files end in .test.ts
Recap

Start with the code you want to check
A test file imports the code and checks it
, 1 to practiseWrite one yourself
, 1 to practiseTry it: code and its tests, side by side
Run it once with vitest run
, 1 to practiseWatch mode reruns tests as you save
One test per thing that should be true
, 1 to practiseA test without a matcher checks nothing
, 1 to practiseThe test can only see what the code exports
Recap

A failing test is good news, early
The parts of a failure
, 1 to practiseRead it before you open the code
Actual value in expect, expected value in the matcher
, 1 to practiseFor objects, the diff shows only what differs
A crash is not the same as a wrong answer
, 1 to practiseFrom red to green
, 1 to practiseTry it: from red to green
, 1 to practiseWatch every new test fail once
Recap

A matcher is the question you ask about a value
, 1 to practisetoBe checks for exactly the same value
toEqual compares contents, all the way down
, 1 to practiseDecimal numbers are almost never exact
, 1 to practiseTry it: a check for a decimal
Nothing, empty, true and false
, 1 to practiseBigger, smaller, at least, at most
What is in the text, and in the list
, 1 to practise.not flips a matcher, toThrow expects a failure
Recap

describe groups tests under a name
, 1 to practiseA good name says what broke
Arrange, act, assert
, 1 to practisePractise: put a test in order
One test, many cases
, 1 to practisePractise: a table of cases
, 1 to practiseFocus, skip and leave notes
, 1 to practiseChoose which tests run from the terminal
Recap

Tests often need the same starting point
beforeEach gives every test a fresh copy
, 1 to practiseTry it: a fresh cart for every test
, 1 to practiseHooks run outside in, then inside out
, 1 to practisebeforeAll shares one thing with every test
A small function often beats a hook
Teardown undoes what setup did
, 1 to practisePractise: pick the hooks
, 1 to practiseSetup that every file needs goes in a setup file
Recap

toEqual forgives, toStrictEqual doesn’t
, 1 to practiseCheck only the fields you care about
Describe a value instead of spelling it out
, 1 to practisePractise: an order with a changing id
, 1 to practiseA few more ways to say what you expect
Say which error you expect
, 1 to practiseTry it: throw the error the tests expect
, 1 to practisePractise: a check that catches too much
expect.soft keeps going after a failure
Recap

Some answers arrive later
, 1 to practiseMake the test async and await the work
, 1 to practiseresolves and rejects, always awaited
, 1 to practiseTry it: a coupon that arrives later
Make sure the assertions ran
A test that never finishes times out
, 1 to practiseErrors outside any test still fail the run
Waiting for something that has no promise
Recap

Stand in for the edges, not the middle
vi.fn() records every call
, 1 to practisePractise: what did the mock see
, 1 to practiseTry it: pay through a mock
, 1 to practiseTelling a mock what to do
, 1 to practisevi.spyOn watches a real method
, 1 to practiseTry it: write the assertion
, 1 to practiseClear, reset, restore
A fake that behaves beats a mock that recites
, 1 to practiseChoosing what to replace
Recap

A config file tells Vitest how your project works
defineConfig gives you a typed test section
What you get without asking
, 1 to practiseChoosing which files are tests
An environment decides what globals exist
Globals, or imports
, 1 to practiseSetup files run before every test file
, 1 to practiseThe command line, in more depth
, 1 to practiseYour app’s Vite setup applies to tests too
Recap

Sometimes the code imports what you want to replace
vi.mock replaces a module for the whole file
, 2 to practisevi.mock is moved to the top of the file
Automock, or keep most of the real module
, 1 to practiseA module mock lasts for its file
A fresh copy of a module
, 1 to practiseStub globals so they can be put back
, 1 to practiseEnvironment variables, stubbed the same way
Recap

Time is a dependency, like the network
, 1 to practiseTry it: hand the time in
vi.useFakeTimers freezes the clock
, 1 to practiseDebounce: wait until things go quiet
, 1 to practiseSeveral ways to move the clock
, 1 to practiseTimers mixed with promises need the async versions
, 1 to practisePin today to a date you choose
Always give time back
, 1 to practisePutting a time test together
Recap

The DOM is the page, as objects
A simulated browser runs the DOM in Node
One config, one setup file
Find elements the way a person does
, 1 to practiseChoosing a query
, 1 to practiseget, query and find answer different questions
, 1 to practiseMatchers that read like the page
user-event plays a whole interaction
, 1 to practiseNarrow the search with within
Recap

React in a minute
Setting up React tests
The component under test: a to-do list
, 1 to practiserender puts a component on the page
Use it like a person
, 2 to practiseEvery interaction is awaited
Props that are functions: hand in a mock
, 1 to practiseWait for what loads later with findBy
, 1 to practiseTest a hook on its own with renderHook
Recap

A snapshot saves the output and compares against it next time
, 1 to practiseThe snapshot file is code you commit and review
Inline snapshots keep the expected value in the test
, 1 to practiseFile snapshots save output as a real file
, 1 to practiseSnapshots are cheap to write and easy to stop reading
Coverage counts which parts of your code the tests ran
, 1 to practiseThe report points at the code no test reached
, 1 to practiseThresholds fail the run when coverage drops
, 1 to practiseCoverage says what ran, not what was checked
Recap

An integration test checks pieces working together
The handler under test
, 1 to practiseBuild a request, call the handler, read the response
, 1 to practiseThe error responses are behaviour too
Give the handler a fake store, not a real database
, 1 to practiseTry it: a 404 for an unknown coupon
, 1 to practiseFixtures hand each test what it needs
, 1 to practiseFixtures are lazy, and can live longer than a test
, 1 to practiseA contract test keeps the fake and the real thing in step
Recap

Test what the code promises, not how it keeps the promise
, 1 to practiseBugs live at the edges
, 1 to practiseTry it: the bug on the edge
, 1 to practiseCatch each bug in the cheapest test that can see it
A flaky test passes and fails without the code changing
, 2 to practiseFind the flake
, 1 to practiseShuffle the order to shake out hidden dependencies
, 1 to practiseA fast suite gets run; a slow one gets skipped
A failing test should explain itself
A test strategy for a whole app
Recap

Projects run different kinds of test in one command
, 1 to practiseWhich project runs which file
, 1 to practisePools decide where test files run
, 1 to practiseConcurrent tests share a file, and need their own expect
, 1 to practiseType tests check what TypeScript will accept
Your own matchers read like the domain
, 1 to practiseAssertion helpers that report the right line
, 1 to practiseSplit a big suite across CI machines
Recap

, 1 to practisePredict, find, fix: every slide is a problem
, 2 to practiseWhat the mock returns, and what survives between tests
, 1 to practiseA module mock that crashes before any test runs
, 1 to practiseTest a timeout without waiting for it
, 2 to practiseA component test, in order and awaited
, 2 to practiseChoosing the query for the question you are asking
, 2 to practiseJudging a suite
, 1 to practiseWrite the config for a whole app
, 1 to practiseReview a test before it is merged
Recap

What you’ll build, and the starter
Step 1: start the tests in watch mode
Step 1: test the price format
, 1 to practiseStep 1: see each test fail once
Step 2: test the cart’s rules, in tables
Step 2: test that adding never changes the old cart
, 1 to practiseStep 3: test the discount codes
Step 3: test each refusal by its class and message
Step 4: replace payments and email with vi.mock
, 1 to practiseStep 4: test what checkout charges
Step 4: test what happens when things fail
Step 5: give the component tests a page
Step 5: test the cart the way a customer uses it
Step 5: press a button, type a code
Step 5: test a bad code, and Check out
Step 6: find what the tests miss
Step 6: test the gaps that matter
Step 7: reproduce the customer’s bug
, 1 to practiseStep 7: fix it, and see it pass
What you built, and where to go next