Pathwise

Manuals / JavaScript / Chapter 10

D · Modules & Testing · intermediate · Week 7 · Chapter 10 of 14

Unit testing with Vitest

Tests encode expectations so refactors do not break behavior. Vitest is fast, Vite-native, Jest-compatible. Arrange-Act-Assert. Test pure functions first. Mock fetch for API modules. Coverage is a guide, not a goal.

Path progress
66%

Step 1 of 5

Install Vitest

npm install -D vitest. Add "test": "vitest" to package.json scripts. Co-locate tests as *.test.js or in __tests__/.

Install VitestDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Install Vitestdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Example

npm install -D vitest

// package.json
"scripts": { "test": "vitest", "test:run": "vitest run" }

Do this now

Add Vitest to your Vite project. Write one passing test to verify setup.

Was this step clear?
Chapter learning outcomes
  • Vitest setup
  • describe/it/expect
  • Testing pure functions
  • Mocking fetch
  • Test-driven habit

Clear these before you leave

Side quest

Test coverage push

Add tests until utils.js and api.js core functions are covered. Document how to run tests in README.