Learn Vitest and Testing Library In 40 Minutes

Vitest is an amazing fast unit-test testing framework for Vue, React, and Svelte. In this video I discuss how to set it up, how to create some tests, and some cool features of it, including in-source testing and mocking responses with msw.

👉Check out my last video on learning to code in 3 months

👉 Sign up and get free Vue cheat sheets and updates!

Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out

0:00 Introduction
0:54 .Tech Domains
02:42 Why Vitest and Testing LIbrary
05:37 Installing vue latest
06:55 Running our first test
18:58 Creating snapshot testing
21:49 Using .only and .skip and .concurrent
22:20 Vitest run and test coverage support
23:53 Adding mocking with msw
24:38 Adding my-pokemon component for mocking
28:03 Adding mock response to .ts file
29:00 Install msw and whatwg-fetch msw
29:30 Setting up msw (for mocking http responses)
32:05 Creating my-pokemon component test
35:53 Creating in-source testing
39:37 Conclusion

Links

[MikeMcBride]

This is easily the best tutorial I’ve found on getting tests set up in a Vue 3 app with Vite and testing library. Really great stuff, thanks so much!

[Dryzark]

Thank you for this!

Exactly the video I needed. 👍

[manchineel]

This was very helpful. I am trying to figure out marking and this made it a lot more clear

[SuperQuwertz]

Thank you for this video!
For svelte it would be so awesome to have a "test" tag in the file where you put all the tests

[maxigarrett]

muchas gracias por el video sos el unico que explica como hacer un mock.. saludos desde argentina

[mcoria]

Very helpful, thanks a lot for the video, regards from México :)

[masibulelemgoqi]

Best explanation... how can one get your vscode setup?

[sibabalejoja]

What VS Code plugin are you using for auto completion?

[memaimu]

Why when appending --coverage am I getting uncovered lines for App.vue and main.ts?

[danieltkach]

This is amazing, but I'm still confused by the Vue element here. Can you do one for React please please please?

[NikosKatsikanis]

anyone got this to with with react 17? I'm getting Error: Cannot find module 'react-dom/client'

upgrading to r18 removes this

[yabuking]

How does screen and render works? I see that you dont assign a variable to render?

[caiovinicius]

GOD BLESS YOU!

THAT'S WHAT I NEEDED FOR MONTHS!

[abuzain]

Hey Erik!
I watched your video and it is awesome . Now i am using the Vitest in my project but I am getting this error :
( Not implemented: window.computedStyle(elt, pseudoElt)
at module.exports )

[ravikalkote]

I am getting below error
Vitest error "SyntaxError: Need to install with `app.use` function" when using vue-i18n plugin for Vue3

[edgarasspiridonovas]

I would suggest make video on testing library and in compintion of something more complex like most used vuetify or element UI 3rd parry libraries covering whole component and making it difficult for new developers to test their code, mostly when Vue Testing Library itself does not really provide clear way to do it.

[NikosKatsikanis]

anyone got history mocking to work with vitest and jsdom?

[yousoufessa]

Render method throws error invalid value in weak type set

[misbahansori]

How to console.log variable in vitest? I have tried to do that but it won't show in the terminal? I just want to know the value of the variable.

[erickzelaya]

Hey Erik, what is the use case of mocking the API? What happens if the API response is not what the frontend expects, in that case the test will always passed because you are using the mock data instead of getting the actual API response.