In this episode of DejaVue, Alex and Michael are joined by Jared Wilcurt, UI architect and open source contributor, to get knee-deep into the world of testing in Vue.js, especially Snapshot Testing.

Jared shares his journey from React frustration to Vue enthusiasm, and explains how he identified gaps in Vue's testing ecosystem that led to the creation of his Vue 3 Snapshot Serializer library.
No matter if you are a testing novice, wondering why you should bother with tests at all, or an experienced developer looking to improve your snapshot testing workflow, this episode got something for you - from reducing test noise, improving readability, and gaining confidence in your Vue applications and components.

Discover how snapshot testing complements traditional assertion-based tests and why it might be the missing piece in your testing strategy.

Enjoy the episode!

Our Guest

The Jared Wilcurt

• Vue 3 Snapshot Serializer
• Website
• Bluesky
• Twitter

Chapters

• (00:00) - Welcome to DejaVue
• (00:20) - How did you get into Programming?
• (05:20) - Learning Vue
• (09:46) - Finding gaps in the ecosystem
• (12:40) - What is unit testing?
• (21:40) - Testing in the frontend
• (25:31) - Snapshot Testing
• (29:45) - Snapshot Updating Fatigue
• (36:09) - Responsibilities & ROI of a Snapshot Test
• (42:46) - Using the Snapshot Serializer
• (46:40) - Snapshot vs. Visual Regression Testing
• (52:57) - A good tip from Daniel Roe
• (53:50) - Further Noise Reduction
• (01:01:22) - A tighter integration?
• (01:05:11) - Wrapping up

Links and Resources

• Riot JS
• Vue Indy Meetup
• Vue Doxen
• Old Jest Snapshot Serializer
• Vue Test Utils
• Testing Library Vue
• Playwright
• Vue 3 Snapshot Serializer
• DejaVue #E043 - The Year in ReVue (with Daniel Roe)

Your Hosts

Michael Thiessen

• Twitter
• YouTube
• Website

Alexander Lichter

• Bluesky
• YouTube
• Website

---

Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.