Posts by Younes Jaaidi
@vitest.dev just surpassed Jest in npm weekly downloads 📈
npmx.dev/compare?pack...
With agentic dev workflows, intent matters. Tests express it.
Last chance to join the next #Angular #Testing Workshop session — starting April 1st — and learn how to write tests with clear intent.
marmicode.io/workshops/pr...
Man with curly hair and beard at a conference coffee break, pointing at a closed laptop on a small round table. In the background, attendees stand near a buffet counter with drinks and glasses.
👋 If you are at #VDZ26 and wanna come say hi or wanna chat about #angular, #testing, #nx and AI dev workflows such as #ChartedCoding, you will find me here.
Just jumped over a few mountains to talk about future-proof testing with #Vitest
#VoxxedDaysZurich is kicking off 🍿
Code snippet of a Vitest Angular test titled “search for a cookbook.” It enables fake timers with vi.useFakeTimers(), creates a component using TestBed.createComponent(SearchForm), and then awaits fixture.whenStable(), annotated with a comment indicating a timeout issue (“⏳ test timeout 🤔”).
Your component has a 300ms debounce. How do you test it?
With real timer, you "wait long enough and hope."
With #Vitest fake timers in manual mode, time freezes — and so does #Angular's synchronization, unless...
... you read my last cookbook's recipe 😊
cookbook.marmicode.io/angular/test...
👨🏻🏫 Workshops are great for hands-on learning.
📺 Courses let you control the pace.
🤖 An AI tutor helps you retry exercises on your own.
👨🏻🍳 Coaching helps adapt learnings.
What if you could get all of this in one package?
✅ Pragmatic #Angular #Testing Workshop — April 1–3
🎟️ luma.com/36dp2b0w
These services manipulate entities that you fully control and are coupled to your "core" (if we think hexagonal architecture). They are long term models that do not evolve if you do not need to.
On the other hand, the OpenAPI specification or GraphQL schema of the backend might evolve any time
When complexity is higher, you have to narrow your tests even more therefore the test double should be provided closer to the "system under test".
Generally, this means providing a test double at the infrastructure adapter level. In other words, it is your: ProductRepository or CartGateway service
At the end, it mostly comes to how "narrow" your test is
Cf. cookbook.marmicode.io/angular/test...
- If complexity is low, then a test that interacts with the sandbox production API is ok.
- Another intermediate option is to have the "backend team" provide a reusable and portable test double.
...
Let's focus on the http test doubles. There are 2 main problems:
- HTTP is an implementation detail. If I migrate to something else, I don't want to go and rethink all my tests.
- Is the consumer (e.g. frontend team) in the right position to maintain a test double (msw) that mimicks the backend?
...
Short term solutions are often more appealing than long term.
The good part about MSW is that it's encouraging users to write fakes (mimicking real behavior) and not mocks (pre-programmed responses).
...
I see. Legit 😊
Generally speaking, I would recommend to never “mock” APIs you do not fully control.
Instead, you could ideally provide an abstraction and a test double for it. This might help: cookbook.marmicode.io/angular/test...
It does 😊
I’m curious though why you assumed it wouldn’t?
🙌
And if you need anything else, know that you can submit content requests on my cookbook 😉
cookbook.marmicode.io/angular/test...
Slide comparing manual vs automatic handling of fake timers in a Vitest test. Top-left code shows a test using fake timers manually: • vi.runAllTimersAsync() to flush framework internals (e.g. Angular sync) • vi.advanceTimersByTimeAsync(300) to handle debounce Annotations explain both steps are required and can slow tests. Bottom-left note explains that since Vitest 4.1.0, a “fast-forward” mode can automatically advance timers. Right side shows simplified code using: • vi.setTimerTickMode('nextTimerAsync') No manual timer flushing or advancing is needed. Footer includes author handle (@yjaaidi / @younesjd.dev) and a link to marmicode testing content.
Debounces, delays, intervals... they either break your tests or slow them down.
⏩ Since @vitest.dev 4.1.0, you can now "fast-forward" time in your tests with `nextTimerAsync` tick mode.
❤️ credit goes to Andrew Scott (@angular.dev team)
🧑🍳 recipe → cookbook.marmicode.io/angular/test...
🤣
Slack DM from November 15th, 2024. Younes Jaaidi: "My speculation is that Vitest will surpass Jest usage by Q1 2026 🔮". Brandon Roberts replies: "2026! 💀"
npmx.dev chart showing Jest vs Vitest monthly downloads from Nov 2024 to Mar 2026. Vitest grows from ~30M to 155.5M, surpassing Jest which sits at 143.3M. The lines cross around Q1 2026.
I just need a few more of you to migrate to @vitest.dev so I can prove that crystal balls work 🔮 😉
(the charts from npmx.dev are so neat ❤️)
My takeaway quote of #AngularGraz
“An LLM is a parrot who is into statistics”
— @manfredsteyer.bsky.social
Great talk by @gerome.dev at #AngularGraz So refreshing to see someone advocating for incremental migrations over big bang rewrites 🪜👏
👏 Enjoy faster builds with @analogjs.org, @angular.dev and @vite.dev 8 ⚡️
github.com/analogjs/ana...
⚡Let’s explore in @younesjd.dev’s talk why Vitest isn’t just trendy - it’s built on hard-earned lessons in speed, reliability & dev experience.
You’ll learn:
•Partial vs Full Browser Mode
•Test architecture patterns
•Fakes & Object Mothers
•Testronaut
Catch it at React Summit!
🧪 In the latest release of @analogjs.org, you can migrate to @vitest.dev with browser mode for @playwright.dev enabled and automatically configured using an @angular.dev schematic!
analogjs.org/docs/feature...
GitHub pull request page showing ‘refactor: remove experimental Jest and Web Test Runner builders #32582’ merged into angular:main. The screenshot highlights the pull request summary with 29 files changed, 34 checks, and a large red ‘−2,938’ code deletion indicator pointed to by a purple arrow.
This is my favorite kind of changes.
Experimental runners out, clarity in.
@vitest.dev is the path.
Thanks Alan!
github.com/angular/angu...
Ng-News 26/07:
• @armenvardanyan.dev, Andrew Scott: router resources, RxJS, ngxtension, TypeScript/Go
• @younesjd.dev: Vitest browser mode
• @manfredsteyer.bsky.social: Hashbrown + AI in Angular
• #Angular Popularity
• Maximilian Schwarzmüller: 10 years of Angular
youtu.be/3oTeWPzVPtY
A timeline displays milestones in a GitHub developer's journey, including commits, pull requests, and issues from 2015 to 2024.
Introducing commitstory.io transform your GitHub commits history into stories.
The GitHub login and app gets the read only access to your profile and reads the history.
You can also create a timeline based on the the GitHub commit history.
Go ahead and share your story and tim
eline.
Thanks for your feedback Logan!
I have to polish that page indeed.
I’ll keep you posted
May I use a screenshot of your post for my next talk?