How to use Vitest with Jest-DOM and React Testing Library

[Music] hello and welcome to another entry in my code With Me video series my name is Eric winklesbeck and in this particular series we'll be working with test driven development for the first entry here I want to talk about v-test I have been using Veet for getting all of my react applications up and running I prefer it to create react app which in my experience create react up has been much slower and seems bloated the file size is much bigger for when you get a project first up and running so working with test driven development now and doing testing I want to use v test which is Beats testing library right it's it is kind of just uh like just just like just if you've used just at all this is kind of a zero learning curve here but I have been messing around over the past couple days trying to get this set up in a way that is conducive to testing react applications uh it took me a little while to find the appropriate setup that I wanted to utilize so I like um what create react app comes with for testing right we've got the testing Library just Dom testing Library react I think I can skip user events because react has like fire events already the the way to get this set up and the reason I want just Dom is because it comes with things like if we look at a test that's I have set up in here previously it comes with things like to be visible to be visible actually checks your not not just something that's in the document but checks your CSS to make sure it's not hidden or have a zero opacity or things like that so when I was first trying to get v-test set up I wasn't able to utilize the just Dom framework here I guess and it was a problem because I could do things like to be defined but it isn't exactly what I wanted to test so it took me a little while to find the appropriate resources to get the setup the right way so I thought I'd make a video to show the process because I think it's hard to come by uh something this specific at least right now I wasn't able to find a video walkthrough plenty of documentation that had bits and pieces of this but nothing that walked through the entire process start to finish so there is a an example list for different setups provided by the v-test team so I'll link to that in the description as well the one that we're going to be utilizing here is react testing Library so I'm not going to go through this piece by piece quite yet but this does have file configurations that we're going to utilize in this so what we'll do to get started is we are just going to we're going to install Veet and then we'll install v-test and then all the other pieces that we need here so npm create at latest and this is going to give us a little walkthrough that we can go through we're going to name our project we're just going to call this video Tut for tutorial and you see we've got a bunch of different options here if we want to do vanilla JavaScript view react preact uh svelte and there's others in here too so we're going with react and we're going to go with react with typescript [Music] and now we're gonna CD into our new folder and install the packages that we just downloaded here so if we open up the getting started documentation on v-test they have pretty extensive documentation here but I didn't see a specific walkthrough of exactly what I was looking for so we can see we've got the basic install commands here so let's minimize some of this stuff here's our new folder we can close the things we don't need here in our video tutorial now we've got our package.json just our basic starting so we are going to npm I Dash capital D for Dev dependency B test and once that finishes installing we're going to add the script for it here a test to NV test easy enough and now we're going to install uh three more things we're going to install JS Dom we're going to install testing Library react and testing Library just Dom again with capital D for your Dev dependency foreign all three of those at once okay and now here in our Dev dependencies we have testing Library just Dom testing Library react and JS Dom so we're good to go on that so now the first thing I want to do we have this V to config file here we're going to open this up and this is this comes when we do the V install originally we're going to add some additional things in here and let's go back to the example list right so we can go to their config file and this this part's also in the documentation that we need even though the documentation only lists this top triple slash line we do need both of them according to this reference and I've I've been working with it it seems like both are needed and then Within our Define config here we are going to put some of this stuff in right so we'll do this part in a minute but we want to add the test object here and we are going to do globals true which what that's going to do for us is we won't need to import things like it or describe or test if you want to use test instead of it we won't need to import that in all our test files we'll list the environment as JS Dom because we are testing some web application stuff here I think it defaults to node.js and we want to do CSS to True otherwise this isn't going to parse your P your CSS files so things like it again so things like uh to be visible won't necessarily work because that's testing some CSS uh in in the whole process and at this point along with setting globals as true here we are instructed that we need to go into our TS config .json file and we also need to add here types and in Brackets we're in uh square brackets putting in v test and globals so now that we have our globals declared we could at this point go through and create a test file and we would need to import from testing Library react we need to input import render and screen and then we'd also need to import the component where they're going to test so in this case we'll just do app and we won't need to import it or test or you know whatever whatever we're using there so we can write an example test here it you know we could say it should have hello world and in our function and then our actual test function right so here we can render our app and we could find let's say message should equal screen because we have screen now if we do something like query by to query by text and we'll use regular expression and we'll say hello world now at this point we have expect we can use that and message but this is the part that I was having challenges with so we've got some options here to choose from and to be defined might work in some cases right just to say that it is present but it's not actually the one that I want to use especially if I'm building out some components to be visible is something I'm going to want to have because potentially what if there's you know an Essence when it should not be visible or what if I make some changes into CSS and that changes something and I make mistakes there right so rather than use to be defined I want to continue our setup process so we can use to be visible so in order to do that we actually need to make a new file right so we've got all of this done except for this setup file plant which we kind of passed over a few minutes ago so let's go back to our Veet config file now we're going to list a setup file and this they have in a test folder we'll copy that just to follow suit you could put this anywhere as long as you're linking to it correctly so we'll make a test folder and in that test folder we're going to make setup.ts and if we go back and we look at their setup.ts which is in source and test and setup.ts the only thing that's in here is import testing Library just Dom so I found a lot of things that said something about importing the matchers and extending the v test so we can do that which maybe you'll see that somewhere as well I wasn't able to get it to work in the config file if we go to our actual test a lot of things that I saw said import matchers from testing Library just Dom and then expect dot extend and matchers and this would also work as long as you remember to have that CSS flag enabled in your config file but since we're doing our test file we don't need to do that import here and now if we go back and we look at our available methods here I should be able to scroll through and find to be visible now that's available for us and here we go we need to be visible does not have CSS properties display set To None doesn't have CSS property visible set to hit nor collapse things like that right so that's important to me and I've gone through in my app.tsx file and I've cleared out everything except for this div so if I go through and I do npm run test this should give us a failure now there we go we failed we have one failing test and it says receive value must be an HTML or SPG element it says to be visible so you would have hello world we see we failed this test right so now if I go back into our app.tsx and let's make this an H1 just so we can select it more easily well we'll select it with that in a second and if I just do Hello World here I save this is going to run this test again and now we're passing which is great and we can check this again here we're importing app CSS right so if we go into app CSS and if we select the H1 that we just made and we set display to none if we save that again now we should be failing again there we are because this is parsing our CSS and is ensuring us that visible is working as we expect it to work so hopefully this helps if you're setting up v-test the same way to test your react applications let me know what your thoughts are in the comments or your experience with test driven development in the next episode we will actually look at the project we're going to work on we'll talk about some ideas we already have for setting it up and we'll dive into the world of test driven development thank you for joining see you next time

Channel: EricWinkDev

Views: 4,693

Keywords: react, vite, vitest, jsdom, jest-dom, just-dom, jest, just, tutorial, how to, setup, install, testing, tester, test

Id: G-4zgIPsjkU

Length: 12min 19sec (739 seconds)

Published: Mon Jan 23 2023