🧪 Test SvelteKit with TDD & VITEST 🧪

Let’s use Test-Driven Development and test our SvelteKit app with VITEST! Blazing-fast tests, to go with our blazing-fast bundler 🚀

Do not be alarmed by the length of the video, the initial setup is relatively quick!

... But we go through edge-cases, common problems and hot tips, and we finish with an extended “coding & chill” session to complete our spec and freshen-up our design 💅 Feel free to use the timestamps / chapters to jump around!

If you’ve never heard of TDD, Test-Driven Development, before, we go through how I’d TDD a real-life problem! Maybe use that section as inspiration for your next coding challenge? 😄

See the code: https://github.com/jmagrippis/vitest-...
See the deployed Dashboard: https://vitest-with-sveltekit.vercel....

Highlighted software:
SvelteKit: https://kit.svelte.dev/
Vitest: https://vitest.dev/
Playwright: https://playwright.dev/

🎶 I’ve remixed “Eye Candy”, “Soft Peach” & “Hank’s Acid Trip” by Sven Lindvall & Daniel Fridell for the background music 🎶

No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄

My own website: https://magrippis.com/

Search for @jmagrippis to find me on socials like Instagram and Twitter!

Between the comment section and the socials, let me know somewhere what you’d like me to cover next 🙌

--
TIMESTAMPS
--
0:00 - Why VITEST with SvelteKit over Jest?
1:11 - Vanilla Setup and TDD-ing a Unit Test 🧪
3:02 - Why hard-code solutions? 🔴🟢♻️
3:53 - Setup for SvelteKit & testing Components
5:46 - vitest-svelte-kit to the rescue
6:35 - Setting up svelte-testing-library
7:15 - The need for a browser environment like jsdom
7:39 - Where to pass Vitest config options?
8:15 - Prove it all works, with some Fake TDD 😄
8:47 - Jest-style globals & extended expect matchers
10:03 - Vitest VSCode plugin
10:24 - Cannot find base tsconfig.json? How to fix CI
12:10 - When to Vitest, when to Playwright / Cypress?
13:03 - TDD & chill to finish our spec! ✅
18:13 - Design & chill to finish our video! 💅
22:41 - Next steps + Comment & Subscribe 🧡