Vue Testing with Vue Test Utils

In this video we will cover Vue testing with Vue Test Utils which uses Jest under the hood.
Timeline:
0:00 - Setup
10:37 - Test Structure
17:15 - First Test
25:13 - Finding Elements
39:20 - Triggering Events
50:48 - More Complex Assertions
58:45 - Running Code Before Each Test
1:01:16 - Finding Elements
1:11:42 - Shallow Rendering
Vue Test Utils Docs:
next.vue-test-utils.vuejs.org...

[@romko-romario]

Thanks for a great tutorial! It's exactly what I have been looking for to quickly learn unit testing for Vue, as I urgently need to do it on a project. I wish success and rapid growth to the channel!

[@asim-gandu-phenchod]

This is what I had been looking for for past few weeks. And finally today I am on this channel after watching your Nuxt 3 hours long tutorial. Thanks for the quality bro

[@asim-gandu-phenchod]

Spent more than 3+ hours of my day watching your videos and it was worth it

[@asim-gandu-phenchod]

56:45 it is actually "text-decoration: line-through"

[@tjphan4035]

Hey your teaching method is great. The authenticity, helpfulness, and pacing is apparent. Looking forward to your future vids!

[@xvicio98]

nah the pacing is too slow imo. but still great tutorial

[@brianrahmarela6552]

wow. this is absolutely amazing explanation. Thanks a lot. this is what i'been lookin for. good bless u man

[@laurin__]

Damn I love your videos, not just raw info but also fun human communication feels like free time at work :D

[@mikoajgraja5954]

It is really great tutorial. Why i think so? I tried to do some tests before this tutorial and run to problems that were all discussed at this video (get/find, not.exists, shallowMount/Mount). I like the pace and the organized format of this video. Thanks!

[@kisoindran6460]

A great tutorial for beginners! Thanks.

[@shahnewazaminjolly367]

Thank you so much for such a great tutorial. It helped me a lot to understand Vue Test Utils. 😀

[@alex_blue5802]

This is the BEST tutorial for learning Vue test utils. Thank you for taking the time to do this. By the way, you are thinking of the css property text-decoration, not text-transform.

[@yabuking84]

Learned a lot! Keep it up man! 🙏👍

[@minhthongvo5989]

Thank you so much for this video, it help me a lot for my project!

[@bekturmuratov7853]

this is awesome tutorial, thank you very much!!!

[@mohammedsaber6782]

Great tut bro , keep going.

[@pedrohenriquerocha8741]

great tutotiral! thanks for all the information!!

[@hjalbarran]

You are a guru bro! Thanks.

[@TheJooshIsLoose]

Great video, thanks for the info

[@weijiephua4192]

thanks for the great tutorial!

[@eyalankri]

Great video. thank you.

[@salvadorcidadealta]

Awesome! Thank you a lot

[@GerardoBelot]

what a good tutorial 👏👏👏

[@bartolace3774]

hello i'm from brasil, and this video really helped me!! thanks, i not found anyone content about test utils in my language, that at altest teaches as you do.
text-decoration: line-through;

[@mikoajgraja5954]

It will be great if you continue this video. My biggest concern now is testing using store (ex. Pinia)

[@ZTF666]

Looks like you read my mind today ! haha

[@mahendranath2504]

Thank you so much

[@vic_shine]

Thanks for the video! It would be interesting to know how to test a Vue 3 application on TypeScript (an idea to continue this video).

[@MrKaki90]

Good for beginners

[@leonardohirsch9086]

Thanks!

[@alamir411]

Thanks

[@KsaniyaN]

Hi Laith! Thank you for the video!
A question - why using a beforeEach hook better than declaring wrapper as const at the beginning of describe()?

[@asim-gandu-phenchod]

It is to reduce the redundancy in the code and follow the DRY (don't repeat yourself) principle

[@aghilpwilson879]

can you do a video
with strapi and knex js

[@horacinis]

From the intro and the logo, I thought that you were Travis for a second 😅

[@namng5422]

can you make video with Vuejs ,how to combine cypress with jest ?

[@farhanmahim]

Can you do a Quasar Crash course with Vue 3

[@Ana-mn5io]

text-decoration: line-through; is was like this?

[@moatasimashraf6818]

in the "Finding Elements" section in the video, I keep getting the following error:
TypeError: Invalid value used as weak map key
at WeakMap.set ()
and it says the error comes from this line:
const wrapper = mount(TodoApp);
can anyone help?

[@yankee-in-london]

I was thrown by your early comment that Vue Test Utils was built on top of Jest. I'm fairly certain this is NOT the case and would be a big mistake if it were. Currently it's very common to integrate the "test runner" functionality with Vitest or Cypress. Am I missing something?

[@LachlanMiller]

Test Utils is runner agnostic - you are right, you can use it w/ Cypress/Vitest/Jestl, or even without a test runner.

[@XY-ds6ej]

TDD is such a cool thing, but the most of us havent enought time to implement tests and/or the clients dont wanna pay for it
.

[@lakshmichaitanya1316]

make a next.js tut bro!

[@Kco86]

* text-decoration: line-through;