Vitest for React with Vite: Unit & Integration Testing with API Mocking
In this video, we build a real-world React testing example using Vitest.
You’ll learn how to write unit and integration tests for a React app that fetches weather data from a public API — and how to mock API calls properly.
Repository with test code:
https://github.com/igo0r/vitest-unit-...
Commands to use:
npm create vite@latest vitest-weather -- --template react-ts
cd vitest-weather
npm install
npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom
Weather API:
https://api.open-meteo.com/v1/forecas...
Vitest:
https://vitest.dev/guide/
Vite:
https://vite.dev/guide/
We’ll cover:
Setting up Vitest with React + Vite
Keeping tests close to components for better maintainability
Testing a standalone Weather component
Mocking fetch for API-driven UI tests
Handling loading, success, and error states
Best practices for frontend testing (what to test & what NOT to test)
Tech stack used:
React
Vite
Vitest
⏱️ Chapters:
00:00 – Intro
01:25 – Install required tools
04:40 – Create weather component
11:15 – Writing unit/integration vitest
18:40 – Conclusions