Learn Vitest and Testing Library In 40 Minutes

hey developers today we're going to look at an amazing blazingly fast unit test framework powered by veet called v-test if you haven't heard of it it's basically a super-powered way of doing tests with inside veet and in this video today i'm going to show you how to get started with vtest we're going to create a couple of different components we're going to mock those components out and test requests functionality using a library called msw we're going to use the testing library we're going to use view test utils but don't worry if you are a react developer i would say watch this video it's going to be almost exactly the same as in react as it is in view so we will be using vue as our testing environment so i'm really excited about this library i'm actually a sponsor of it i think it's an amazing tool i think a lot of view developers a lot of anybody that's using v probably should you be using vtest but before we get too far let's talk about tech domains hey developers stop what you're doing for a moment and really check out this interactive experience it's break the code 2 by dot tech domains they created basically windows 98 in your web browser and but what's really cool about it it's actually not just windows 98 in a web browser it's an interactive game and it has puzzles and secrets in it and you can win prizes so you can win exclusive keanu reeves science script from the matrix you can win the james bond goldeneye weapon system and all you need to do is kind of click around there's this story here i don't want to give anything away they haven't even have like web explorer like in old school internet explorer 11 they have a terminal but you have to kind of search around this interactive windows 98 site and solve the puzzles they even have clippy here in the right hand side and you can win prizes so i wouldn't normally promote something like this but this is just a really cool thing brought to brought to you by break the code 2 from tech domains i'm going to leave a link in the description so you too can kind of play this interactive game and try to figure it out you said this is inside the web browser if you didn't know i think i'd be in an old school windows 98 so yeah check this out and let me know what you think if you win something or you find something out leave a comment below once again make sure you go to this website i highly recommend it i've been playing around with it it's pretty fun thanks thank you to dot tech domains and remember dot tech domains has made a comeback with break the code 2.0 and it's absolutely insane so go ahead and play so you don't miss out go to go dot tech slash p w e b t c that's go dot tech slash p web tc that'd be awesome that's going to help this channel out so make sure you click on the link in the description thanks let's take a look at v-test and before we dive into it let's take a look at why you may want to use it for your next project so i'm here at the vtest.dev website if i click on yvtest it basically says that vtess is a native test runner for veet so instead of having to worry about setting up a bunch of configurations and dealing with complexities of transforming source files it's all built into veed itself it gives jest some credit that it's adopted a lot of the patterns from jest including mocking snapshots and coverage from it so you're kind of getting the best of both worlds they even have inside here a comparison guide where you can kind of get even more information of why you may want to use v-test instead of jest i can tell you personally i set up just they just does work with vt but there was a lot more configuration i had a lot more problems when i was starting off with it and starting with v tests makes it much easier you can also use veets configuration files will work naturally with vtest so it makes it a lot easier to get working so there's actually two ways that we can set up v-test in our app so if you have an existing veed app and you've come to this video thank you for watching uh what you need to do is go to the vtest.dev and look at the adding v test to your project so in that case you would use this npm install and install it there's very little configuration but if you need to you can add this test object into your veet config file and then you just add it in into your script so you can add test or coverage and it's v test and we'll look at that here in a second and then there's a bunch of commands watch run dev and so on and so forth one thing to keep in mind is that it does recommend that you install js dom or happy dom for dom mocking so you are going to want to install jsdom it doesn't come out of the box that but you want to install that to make sure that you can get up and running quickly and then you need to set up your scripts folder and then i would follow this this getting started guide here for the sake of simplicity there's a lot of scaffolding and tooling in the developer world for react view and angular and svelte and all these other ones and some of them actually do include v-test out of the box i'm going to show you one way of doing that we're going to install a new view app using the view at latest that's going to include a couple of libraries it's we're going to be using this view test utils and then we're going to using something called the testing library and if you're coming from the react world you'll recognize this this is a really popular library and promoted by ken c dodds it works with vue and react and svelte it looks very very similar if you write tests in view or react you're going to feel if you're coming from react and you're coming to going to view you're going to feel very at home with this and it's a basically this is a wrapper around view test utils so let's go ahead and look at that and if you want to there's going to be timestamps at the bottom of this video so you can skip ahead if this isn't interesting to you so i'm going to npm init view at latest and what this is going to do it's going to ask me a few questions so i'm going to say this is a view test project on yt i'm gonna add typescript no jsx it's not do no router no pinya yes for v tests for unit testing since we're gonna be doing that in this video today we're not gonna do cypress we're not going to have eslint and that should be it so i'm going to go to the folder and one thing i want to make sure is that i install the libraries i need so i'm going to install this one more library i'm going to install this dash date dash d developer dependency and development dependency we'll do testing library view and that's that way it comes that now out of the box this actually doesn't actually come with it out of the box it comes with view test utils and v-tests but it doesn't come with a testing library so we have to install that separately so let's just take a moment okay great everything's installed and you can see here in the right-hand side i have this this is the new project that i created we're going to do some cleanup on it but first let's just take a look how you run unit tests so if you look in the package.json file and you take a look here you can see right here i have a scripts and in scripts i do have a test unit which runs the vtest environment jstom this is really important if you happen to run v test on the on the command line you'll need to make sure you put dash dash environment jsdom or they just won't work but it already has it in here so do npm run test unit and if i spelt that wrong i apologize so lowercase u you can see it already ran one past one test has already passed so we've already started our journey of running tests let's take a look at the one test it actually has so if you look at it's the hello world spec file this is what this is using v-test out of the box you could see you can hear this you can see here the scribe it and expect is from v-test it's using mount from view test utils and then it's importing the component and this is essentially how you use view test utils use this wrapper you mount it and then you can kind of do assertions let's create our own tests and have something different here and do our own component so i'm going to do a little clean cleanup here i'm going to delete this spec file and we'll do a hello world and then we'll run npm run dev and if we did this right we should see an empty hello world cool so here's our hello world nothing there okay let's create a component we're going to call it view view dot view and this component is going to be a primitive so we want a component that someone can pass in a span a div whatever html element they want and then it has some props that you can add in so something really simple to start off with so i'm going to add a script tag we'll do setup laying equals typescript and then we're going to use our define props to start with here so we'll do define props and this is a macro and we can pass in an element it's gonna be a type string and then just for fun we'll add an aria label i don't know it'll type string and then we'll have is disabled and that'll be a type boolean so if we wanted to i know turn it on or off and then inside our template or disable or enable it in our template we're going to use this component i don't know if not many people use this but this is a way you can essentially create like dynamic components in view which is nice so i can just do is and then i'll pass in this element string and i can do an aria label and this will be that arya that aria label that we just created and then the third one we'll do is disabled and we'll just have it to be is disabled now the aria label is complaining for a second so because i misspelt it arya uh supposed capital there it is so this is a really simple component and now we can run some tests on it but first i suppose we could see if it actually works we can go back into our app view and import it in so we can do import in this case it would be we'll call it view from and i believe this is in the components and then this will be the view view and we'll see here and we gotta it's already given me a red squiggly line this is typescript saying hey you didn't you didn't pass in the element so we'll do element equals i don't know div and one other thing i just thought of is we actually want to have you be able to put information in between this so i'm going to make this a slot so any information between the opening and closing brackets of this component will be displayed and that way i can do something like this hello from view and then i'll close it so let's see if that worked here it is hello from view and if you look in the inspector and we look at it in more detail it is a div and disabled's false awesome so now we have our div element so let's do some tests on this to see if we can get it working so uh i'm going to create a new file here i'm going to call it view uh i think i'll call it view dot spec and this should be our spec file that we're going to be using for this test that we're going to set up so i i need to import a few things i'm going to import and render and screen and we're going to do that from the testing library the at testing library view and then we're going to need some stuff from v test we want at least the describe it and expect from v test there it is and then we need to import in view from which i think is here and we'll need to do view dot view cool so now the first thing i like to do when i set up tests is i create tests per component and the name of the describe which is usually how you kind of break down your tests will be the name of the component so in this case it already knows for me so view would be the first one and then inside here i usually put in any setups of the tests i need and then i do it for to for each individual test so i want to let's say here i want to have some view text i'm going to call it hello from inside a view and then i'm going to have my first test and i guess while we're doing this we can open up a separate window and i can show you a few of the ways you can run it now if you want to just run something quickly from the command line a really neat trick is you do mpx v test and then the commands that you want to run so if you remember what we did before if you look at the package dot json it's running this dash dash environment json dom so we want to do that environment js dom and so now if i hit this enter here it should start running all the files if it detects any spec files and it did but it says there's no tests yet since we haven't created any tests i think this is pretty handy because now we will be able to keep track of the test and i think if i want to i can try to move this to a different side but maybe for now we'll just leave it kind of halfway open at the bottom and maybe that'll work so here is our view text and now we want to create our first test so we'll do render span correctly and we'll make this async and we'll make sure we have opening closing brackets and what i want to do here is i'm going to just add in i don't know an id which we're going to call view id well we'll call it view id and we want to essentially we're arranging right here we're just basically creating the setup for the test so we have this render and now the render is essentially how we create our component we kind of mount it there is in view test utils called mount so this sort of the render from the testing library view is another way to do that it's the same syntax but it returns back uh something that we can use inside our view test utils so we'll do view here and now we can put in like props we know we have a required pop of an element which is a span we have an id now because we put uh we passed an id we call view id there yeah i think that's that'll work and then i can do slots too so this is like the slot is the default slot whatever the slot is named you put right here and then whatever it is so we're going to say the default slot okay now you're probably thinking why did we use id here and but if you look at our view we have aria label is disabled just keep in mind with view that any props that you don't explicitly set inside here gets added to the top most component so id should be added here and we can check to make sure that test works so now i can do view and i'm going to use a weight now this screen is like a kind of a helper method that gives you accessibility access to all the helper functions so this find by text is a way it does this matching to find the values by text so a lot of the view a lot of the testing library has these helper functions that kind of push you in the way of accessibility like you should be creating a roles and you should be creating um these different accessibility and aria labels and then you can do these fines by these different different things without having to write it all in so this has this is an easy kind of helper method for find by text so i can put in here this view will do view text and now i can do some assertions on here to see if this works so i'm going to do expect here and let's try the first one i want to make sure the view and by the way since i'm using typescript i get autocompletion which is nice undo view dot id and we know that should be view id because that's the id that we added right here to the prop and that should be automatically added so if we save this our test automatically ran and says it's passing it's green which is good uh so here is one past and we're good so this is sort of like you can kind of think of this in sort of a red green refactor type way where now we have created a test it was red we fixed the test it's green and if we really wanted to we can go back in and refactor this so this is not really type test first development since we already created the component but it's it's a way of creating the test seeing it fail then fixing it and making sure it works and then we can add some other expects in here too so we can expect i don't know um view dot inner html uh to be the view text so remember the span the slot right here had this view text hello from inside of view so let's make sure that it actually works there so if i save it cool it's uh still passing so if you scroll down the bottom test passing you can also just like fail the test to make sure it works test one two three and now one failed so it's still failing cool so we know it's working there and then we can just do one more expect view dot node name to be us well we not a span we called it a yeah we did call a span spam cool so all the tests are passing which is great uh we also have availability well let's let's add in a second test so one thing that's really cool with vtest is you can do not just tests but you can do snapshots as well and well their type of test that is and snapshots are a way to take the look and feel of your component and kind of save it into a file and if someone accidentally at some point changes something it'll tell you so that way it takes like a snapshot of what it should look like so if someone breaks like a css and and doesn't look the right way then your snapshot will fail so if i come here uh let's add another one i'm gonna call this snap shot matches and this one i'm going to do a wrapper this time i'm going to use the render and same thing we did before it's going to be the view and then we're going to add in the props and element this time i'll do a div and now we can do expect wrapper and there's this two-match snapshot to match snapshot so if we do that now it passes and you can see here there's two test files now or two tests and it created a snapshot for it so he says snapshot right here one written so now if something changes in our view and we break it it'll automatically air out and i'll show you what happens so let's say i added in for some reason another div here well let's say yeah let's add in a some text here hello world okay now you can see our snapshot failed our test failed and it actually kind of pastes what what it sees in here expected zero receive three so the dom does not does not equal what it should be and at this point you can press u to update the snapshot and then it automatically fixes it and if you scroll it says one failed well now there's another one failing um but it did update it so snapshots one failed one updated tests one failed one failed one passed so the snapshot's passing but the other one is failing which is this find by text view text is failing because we have this hello world in here so i'm gonna delete this now the snapshot is failing again but if i do u for update okay now everything's passing again cool so now you can see how we've been able to create a couple of different tests and create a snapshot and i want to show you a couple of other things here real quick so in this describe you can also do dot concur concurrent so this will make it so all the tests run at the same time so it could be a little bit faster especially if you have a bunch of async tests you can also only run one at a time if you want if you do i t dot only that will mean it'll only run one you can see right here if you scroll up a little bit one pass one passed one skipped so now we've skipped one and you can also do skip here too so if i do so let's take a look at some of the other commands that you can do so here in the command line i have npx vtest dom but if i do run at the end it'll just run all the tests once instead of watching it in preview if if you take the run off then it's in watch mode and it'll update anytime any of the tests change which is kind of helpful when you're writing tests and you're creating components at the same time there's also another command to do uh if you want to get like code coverage and you can obviously configure this so it's dash dash coverage at the end if you did coverage by the way the first time i run it i didn't have c8 installed but you just have to install it and next time it does it it'll create a code coverage which if you scroll up well you have to run it twice after installs it c8 the first time and now you can get this nice thing here it says i have 100 code coverage on my view dot view file which is really cool and uh yeah i'm good with that with that function there there's a few others too if you go to the features and getting started guide and commands you can always add these to the script tag in your package json but you can see watch you don't have to put in watch it'll just automatically run it if you don't have any other arguments behind the v test but you can put in configurations you can open it there's a run mode which we just did you can override modes so it's really handy there's a lot of really good stuff in the command line you can use okay let's take a look at mocking and how we can mock a request from a server this is a little more complicated but feel free to pause this video at any time and just look at the code and also i'll make sure the code is linked in the description below so uh first thing we need to do is i i think like an easy one will be like the pokemon api i've done a a different video on that you can see here where i went in created a pokemon api but i think this will be just real simple to start with so first i want to create this new pokemon api uh view component so i'm gonna go new file i'm gonna call it my pokemon dot view once again i'm doing script setup laying equals ts and then i'll have my template and i'm going to keep this as simple as i can i'm going to have one function it's going to call it's going to be called get pokemon and inside this function it's going to grab some data from this fetch endpoint which i'm going to copy and paste from my different screen here and now we have this pokemon and then once i get the data i'm going to call it pokemon await data.json and then i need a ref here so i'm going to import in ref from view and then i can do const pokemons plural and it's gonna be empty and ray and then i should be able to pokemons.value equals uh pokemons.results now i've already looked at this api so i know what it is but we'll console log it out pokemon cool and now we should be able to use it in our template here so i want to have just one really big ugly button so i'm gonna put a button here it's gonna call get pokemon we're going to at click handler which we'll just call get pokemon and then we are going to kind of go through the results so we're going to have a div here we're going to v4 equals and we'll have a pokemon an index uh of in pokemons that should be right and then in here we're just gonna have an h4 we want a key remember always putting a key in when you're ever iterating and this will be pokemon.name so if we did that it should work i'm going to go back to my app view i'm imported in my pokemon from components and the name which should be i think it's my pokemon.view and if i did that right i should have i'll put a break and then i'm gonna have my pokemon all right let's see if that works i have my button i kid it cool here are all my pokemon from the api and nice thing too if i go to the console i should see an object yeah here is all the information that's being returned so what we need to do now is to actually make sure that we can mock this api out so i want to do this i'm going to do this copy object actually i'm going to store object as global variable i'm going to json i don't know if you can use see this yeah so you can do json dot stringify temp one i know there's many ways of doing this i'm gonna copy and paste this copies control c it and inside my tests i'm going to create a new file and i'm going to call it mock pokemon dot ts and then i'm going to paste it save it and i'm going to export let's see your const pokemon response there it is so i went ahead and automatically formatted me so now i have the whole response that i got back from the api so i can use this later on in my mocking cool cool cool so now i need to do a few things to get this working now v test has a whole mocking section if you go into here go to mocking you can mock out dates functions globals functions is a little easier you just use this vi and you can use vi dot spy on get mock name but i but i want to show you requests requests they recommend that you use the mock server worker so it really works well with vtest so that's what we're going to do so uh we're going to we have to actually install a couple of things to get this working so i'm gonna do npm dash i uh oops i dash d we're gonna do what wg fetch because we need to somehow since we're using fetch in our client side we need to have a poly fill for it so we're going to fake the fetch request and then we're going to install msw2 and now we should be able to set this up now we can in our veet config which we will go into we're going to create oops let's see here in my veeatconfig file since we vtest is working with veet i can add in this test and this test is talking basically vtest will look for this and i'll do globals true which which we'll need for our tests and then we'll do setup files and this is a nice way of creating a place where you can have additional configuration that runs before all the tests so we're going to have this new source setup tests.js file and you know i can actually do it ts if we want because it's typescript awesome now we need to create this test file so i'm going to go here in my source tests actually i'll just put in the source folder i'll create a new file i'll call it setup test.ts and if you can see that i just created one in that folder and now all i need to do is actually get that up and running so uh instead of using me type for the next five minutes i'm gonna copy and paste this from another page so what this in this is essentially right out of the this is right out of the documentation for msw essentially this is how you mock out the test so what we're doing here is we're telling it and by the way i need to put the correct pokemon response name i think i called it mocked if i did that right it should go away uh cool so now i have this is the rest handler so anytime msw sees this api being hit it will return this json which i had already created earlier if you remember i copied and pasted the output from the actual pokemon service into this file and then it also says you know when you as soon as the as soon as you run tests make sure you set up the server which is a command from the msw node you close it at the end of all tests and then you reset the handlers after each test and if i did this all correctly now we should be able to create a test for this pokemon api and make sure it works which is really neat so let's do the next thing here let's close a few of these files i need to in my tests i'm going to create a new test and this is going to be called [Music] my pokemon.spec dot t s and in this one i always like to start off with another spec file i can just copy and paste so that way i don't have to try to figure it all out and so once we're going to delete a few things here we're going to call this my pokemon we're just going to do we don't need this i'm going to delete the other it don't need that we're going to not use view we're going to do the map pokemon and this should be called my my dash pokemon.view that's what i call it right yeah my.pokemon and then in here we don't need this test id we're going to render my pokemon and we don't have any slots or anything so it should be like this and in this view here we we're going to find if let's delete the rest of this let's see what we want to do next so we're rendering the pokemon api but we want to first go here and await we're going to screen we're going to find by text and we're going to find the button so we're just going to find it by the text here get pokemon and then i'm gonna wait and i have this new way you can do things here i'm just this thing called fire i think it's called fire event that's what it's called and this is a way we can do click events it's a part of the testing library it's pretty awesome so you click here and i just pass in the pokemon and i have an error here because this should be dot there we go and now that we'll click the button as if it's a user and now i should be able to see once again find by let's say find by text and we know that one of them was bulbasaur and we could do a whole bunch of tests here we can check to see if all of them are there if all 20 of them are there but let's just see if we can get one and then we're going to insert we're going to do a spec here that value dot inner [Music] let's see here should be value dot inner [Music] if i could spell right h tml to be bulbasaur so i'm going to save it here oh you know i messed this up this should be find by text there it is so if i run npm run test unit so it failed but let's take a look here oh that's the snapshot field cool so everything's passing it was able to do this this work here it says three past and it looks good now if i put in a one that wasn't there i don't know one two three now failed so it didn't find that bulbasaur one two three but it did find bulbasaur awesome so now if i save it again go back to the bottom you can even see it it pasted here it all passed again you can see here's the console log where it got grabbed all the information awesome so now we have created a test we've mocked out the api using msw we've tested it and it works that's awesome the last thing i want to show you is how you can do inline tests inside your own view or react or swelt components which is kind of crazy i guess this came from rust but you can create basically tests inside your files so let's take a look here so i'm in let's go into i know view that view and let's create a test so to create a test i'm going to create a really simple one and i'm going to copy and paste this again from another screen to just speed things up and by the way just if you don't know you can add multiple scripts setups or multiple scripts with inside a view file just don't you can only have one script set up so in this case i have a script lang equals ts and now what you do here's a function that just adds two numbers and i use this thing called import.meta.vtest and right now it's giving me red squiggly lines we'll try to fix that but this will basically say if this exists go ahead and run this test which just adds it checks the ad you put add one two three and it's um in this case three four five six should be six i believe so we can test to see if this works uh to get this working we have to do a couple more configurations first in our veet config file we need we have global setup files we need one called include source i could do this right yeah let's think it's include source and this should be an array some do source stardar slash dot and then in here you can put which files you want to include so i'm going to say js ts and view so now view should be like a normal file it sees and then on top of that we need to go into our ts since we're our typescript is not happy with us we go to ts config.app.json and inside here we're going to add in under compiler options types and then we need to add in this type for vtest slash import meta i did that right and then in our veet we'll do one more in our vee config we can actually in this test there's one other thing we can do is when you're running it in production you can tell it to be undefined so it's always false so we'll put in here a believe it's is it define it should be defined here define not inside the test and then it's there that's an object and then the object you can put in import dot meta dot v test undefined okay so if we did that right first if we go back to our view it's still giving us a right squiggly line but if we i don't know let's do a type script let's do a reload window cool so you can see everything passed and this time it actually included one test from the view.view file you can see tests for past awesome and you can see here we're no longer getting any errors all right red squiggly lines so this works and if you run this for production it'll ignore this and this won't be included and with the dead code removal with veet it won't even include this in your source files i don't know if you really want to do this kind of testing maybe if you have a utility somewhere and you want to add some quick tests to it i'd rather keep it in its own file but it's kind of cool that veed gives us the option of doing this all right well i hope you guys learned something here there's a lot that's in this veet ecosystem i didn't get to all the different features if you guys want to check out the vtest.dev if you want to look at it but i think i gave you guys a lot of the basics of getting started and a few things like mocking that'll become very important for you if you made it all the way to this end of this video thank you so much i really appreciate it make sure you check out that tech domains breaking the code to check out the link in the description click on that it's a really cool contest they're awesome for sponsoring this video so thank you take care

Channel: Program With Erik

Views: 32,612

Keywords: Vitest, Vue testing, React Testing, Vue test utils, Testing LIbrary, Testing Library tutorial, Testing Library React, Testing LIbrary Vue, Vitest mocking, Vitest Vite, Vite tutorial, Program With Erik, Erik Hanchett, programs, which programming language

Id: FJRuG85tXV0

Length: 40min 12sec (2412 seconds)

Published: Mon Apr 04 2022