Hey there! I'm building this guide in public as I learn to test Angular 21 apps with Vitest. Real struggles, real solutions, real tests.
So Angular 21 just dropped, and they made Vitest the default test runner. Pretty big deal, right? But here's the thing - there aren't many comprehensive testing resources out there yet.
I decided to change that by documenting everything I learn as I learn it. Every test I write, every bug I hit, every "aha!" moment - it's all going in here.
This is me learning in public. You'll see the messy parts, the frustrations, and hopefully the breakthroughs too. No polished, perfect tutorials here - just real-world learning.
Look, I'll be honest with you:
- Karma is gone - Angular 21 dropped it. Vitest is the path forward now, whether we like it or not
- We're all figuring this out together - Thousands of us are migrating right now
- Good resources are hard to find - Most of what's out there is either scattered across forums or already outdated
- We need real examples - Not just "hello world" tests, but actual, messy, real-world testing scenarios
Tests that actually work for real scenarios - components, services, forms, HTTP calls, signals, all that good stuff.
- 📖 Quick Reference - Copy-paste patterns when you're in a hurry
- 🔬 Research Notes - All my technical discoveries and "wait, that works?" moments
- Weekly testing guides (as I progress through each topic)
- Pattern libraries for common testing scenarios
- Migration guides from Karma to Vitest
I'm organizing everything from basics to advanced stuff. Start wherever makes sense for you.
# Clone the repository
git clone https://github.com/olayeancarh/angular-vitest-testing-guide.git
cd angular-vitest-testing-guide
# Install dependencies
npm install
# Run tests
npm test
# Run tests with coverage
npm test -- --coverage
# Run tests with UI
npm test -- --ui- ✅ Project setup with Vitest
- ✅ First component test
- ⏳ Testing component inputs/outputs
- ⏳ Basic mocking patterns
- ⏳ Service testing with dependencies
- ⏳ HTTP testing with HttpClient
- ⏳ Testing forms (reactive and signal-based)
- ⏳ Async operations and observables
- ⏳ Integration testing strategies
- ⏳ Testing with signals and zoneless components
- ⏳ Migration from Karma to Vitest
- ⏳ Performance optimization and CI/CD
Phase 1: Foundation & Validation (Weeks 1-4) Current Week: Week 1 - Setup & Exploration ✅
- Got Angular 21 + Vitest working (finally!)
- First tests are passing (small wins count!)
- Created all the documentation structure
- Writing my first blog post
- Recording first video tutorial
- Making 3-5 short videos for social media
- Angular 21 - Latest version with standalone components
- Vitest 4.0 - Fast, modern test runner
- TypeScript - Type-safe testing
- Testing Library - Best practices for component testing
This repo is just the beginning. Here's what else I'm building:
Deep-dive tutorials on every testing pattern I discover. No fluff, just real solutions.
Visual walkthroughs when code alone doesn't cut it. Mistakes included.
The ultimate guide - everything I've learned, structured and polished (launching in 20 weeks if all goes well!)
TikTok/YouTube Shorts/Reels for those "I just need to know this one thing" moments
Learning Angular + Vitest too? Let's do this together:
- ⭐ Star this repo so you can find it later (and it motivates me to keep going!)
- 👁️ Watch the repo to get notified when I add new stuff
- 🐛 Open an issue if something breaks or you're stuck
- 💬 Start a discussion if you want to share what you're learning too
Let's connect! I'd love to hear from you:
- Twitter/X: @yinkz__
- LinkedIn: Olayinka Akeju
- Dev.to: @olayeancarh
- GitHub: @olayeancarh
- YouTube: Coming soon - subscribe to get notified!
- Blog: Coming soon - building in public!
angular-vitest-testing-guide/
├── docs/ # Comprehensive documentation
│ ├── QUICK-REFERENCE.md
│ ├── PROGRESS-TRACKER.md
│ └── ...
├── examples/ # Isolated testing examples
│ ├── 01-basic-component/
│ ├── 02-service-with-http/
│ └── ...
├── src/ # Main Angular application
│ ├── app/
│ └── ...
└── README.md
Here's my philosophy for this whole thing:
- Real over perfect - I'm showing you the struggles, not just the wins. That's where the real learning happens
- Document everything - Even the "duh" moments. Future me (and you) will appreciate it
- Ship regularly - Better to publish something decent weekly than something perfect never
- We're in this together - Your questions and feedback make this better for everyone
- Go deep, not wide - Surface-level tutorials are everywhere. We're diving into the why, not just the how
- Keep it real - Real-world problems, not made-up examples that work perfectly every time
This project is licensed under the MIT License - see the LICENSE file for details.
This means you can:
- ✅ Use this code for learning
- ✅ Copy examples into your projects
- ✅ Share with your team
- ✅ Fork and modify
- ✅ Use in commercial projects
- Angular Team for making Vitest the default
- Vitest Team for an amazing testing framework
- The Angular community for feedback and support
- Something's broken? Open an issue
- Got a question? Start a discussion
- Want to help out? Check out CONTRIBUTING.md
- Just want to chat about testing? I'm all ears!
Heads up: This is a living, breathing learning project. You'll see messy commits, honest mistakes, and real problem-solving in action. That's not a bug, that's the whole point. I'm documenting the actual learning process, warts and all.
Building in public since November 2025 🚀
If you find this helpful, please star the repository!