Using Vue Test Utils in Vitest
Vložit
- čas přidán 27. 03. 2022
- Testing Vue components is a crucial step to ensuring your frontend app is working as expected.
While it's just as important to test all the logic driving your app, testing the rendered output itself can give vital information to how your app is actually looking to your end users.
LINKS
Vitest Simplified • Vitest Simplified
✅ FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
learnvue.co/vue-3-essentials-...
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co/vueschool
Music by Lukrembo
thanks for the heads up with vue test utils in vitest! this would really help with testing my vite components a lot! would be also interested in seeing integration and e2e testing in vite as well
Thanks for the video! An explanation of checking emits and the use of snapshots would be nice 🙂
Agreeeeed, something with mocking an basic API will be very nice too!!
It would be greeeeat. The Kellogg's tiger said so.
ooh thats a great idea!
Hey thanks for the quick overview just what I needed , kindly do a guide for testing a modular store
Vitest + Vue Test Utils are amazing together!
i agree!
Very cool, thanks for share with us. Great content.
Great video as usual :-)
May be some explanation about mocking functions ?
make a serie with small videos about all the things we can test. your videos are amazing
An underrated channel 🙃
I want a full vitest course!
thanks for the channel
can you make video about
how we implement social share buttons links with popup in efficient light way with vue3
Damn, been looking forward to your new video for while. Awesome video as always.
I wonder if I can ask what extensions you use for Vue (beside Volar ofc). Maybe make a video about it (all thr the VScode tutorials for Vue on YT I found are almost 3 4 years old).
Anyway, keep it up 👌
besides Volar, most of mine aren't too Vue specific. I use Typescript in some personal projects and the Tailwind VSCode extensions, though!
Ty Man, this will help me a lot soon. Great Job!
Also, there's a way to support/donate you?
glad it could help. right now, i don't have a Patreon or anything like that, but I am working on something on LearnVue.co to help provide some extra content/learning material that's coming in the next few months :)
thanks for all the support!
Wasted about 2 days before realizing I needed to also install happy-dom 😅
Anything Vitest related would be very helpful, thanks
yup the happy-dom is a game changer!
Good primer, thanks. All of those expansion ideas at the end get a "yes please" from me. Also, adding Pinia (@pinia/testing). I currently have a hard time - hopefully not for long - what store data (made available in the actual app from an API) should be mocked/created; like how much is just enough, and what can be set as values vs undefined (if that's a thing).
Awesome :) I guess mocking would be a great advanced topic!
oooh alright thats good to know there's more interest!
@@LearnVue definitely! I'm actually a tech lead at my company and I share your clips, because I love the simplicity and educational value :D
Yes please
I appreciate how easy and short this tutorial is. Thanks!
I'd like to know how I can test each item in items in my component, but with passing props: { items: [{name: "foo", url: "bar"}, ...]
I want to expect item.name.text === item.name.text in each iteration. I don't know how to get access to the props I passed to my competent if I do a
wrapper.findAll("a").forEach(link, index) expect link.text.equals(props.items[index].name
Pretty good content.
Sigh that even it’s a year later the really vitest combined for component testing content still few😢
If u wanna cover slot testing, that would be cool
i love how similar this video looks to fireship. i checked the channel name twice
Did exactly what's shown in the video yet I'm getting an error that says that vite-node fails to load the .vue file and then the error points towards the first arrow function in the describe method
1:07 Have you a video about your way of make directories folder and files in a vue project? I have problems with that
i don't currently, mostly it depends on the type of project but i've been using a lot of the Nuxt folder structure and atomic design patterns for the components!
greetings crack I have seen a lot of testing-library in the development community for vue it would be good to learn this testing library
how to test injections would be appreciated
Has anybody got this running with Vuetify? Sadly it does not seem to be able to find its components. "[Vue warn]: Failed to resolve component: v-container"
Broooo where have u been
got busy the last few weeks 😔
Jajaja a simple unit test 😌
unfortunately my company's current project frontend code was written by a newbie so a lot of services were imported directly, not as dependency services so I can't supply mock version of those services like authentication in vitest for testing. But I don't have authority to make PR that changes these things. Fuck my life
*Hello Word bold text*
Normal text