How to Test React Components Using Enzyme and Jest | Code With Me!

hey guys this is Lucas from better coding Academy and in this video I want to show you how to set up just an enzyme for any react application that you want to test so I've got a very simple one here it's just really a form so I've got to form the say I type in my name and then for example my email I say Lucas at example.com and my favorite author it's just a bunch of prefilled names here but we just pick any one of those and then click sign up and then it will say sign up complete and that's the whole form it doesn't actually sign up anywhere but this a favorite author thing does actually load from an external API so we're going to build all of this out well actually you know I'm going to show you what I've built explain it through and then I'm going to show you how to put the test in for this particular application so let's go and have a look at the code it's just a very simple set I'm using parcel inside a parcel here I've got the gesture man I'm not actually using that that's kind of weird anyways we've got our index rjs we've got pretty simple stuff just a fun and then we include the sign up component so the sign up component here is this one here and you can see we're making use of style components this one at the moment just switches between sign up complete and then the form itself said the two states that you saw just there and the completed component just shows the tick and sign up complete which you've seen before and then inside a form we've got the form here this form here is made using react hawk form so that's the library that we'll be using here and I'm going to show you kind of the nuances surrounding testing react form using just an enzyme so I'll go into detail on that for a little bit we've got just the basic Styles here we've got the form down here we've got some validation here just to make sure that they're all required so for example you see you can click sign up here unless you use hope in everything so on this one here like that and this one he also has to be an email address but that's just using type equals email on that one there so we have at least three here we've got the label label text inputs the full name email and this one is in favorite author so favorite author is a subcomponent so if we go into here open up favorite author you see we have the slate here which is this select here we've got a select wrapper which includes a drop-down arrow the drop-down arrow is just the young just to this thing here so really doesn't add anything to the functionality what you should focus on here instead is the use of the effect so we do fetch authors and then we set all this here which allows them to show here and then allows the user to pick one so by default obviously it's just value equals loading but then we have other stuff that we do as well on this one here we have a forward ref so the forward referee I'll be passed in the ref from the parent and the reason we do that is so that we can get this part here working so we use react dot forward ref in order to do that straight from react here and then we also pass in the disable prop which is just in submitting so if it is submitting and we disable it and we don't let them change the selection now in terms of the submission process we have this signup function now the signup function is from sign up here so just that file right there and in this file here this isn't actually a mock this is just meant to be the actual sign up but obviously here we don't have an external API or something that we actually want to sign up to so instead we just write this which is just waiting one second and then after that it just always succeed so instead we just have this here we just wait one second and after that it always resolves it always succeeds and we don't really worry about it from that point onwards after we do that we do push sign up and push sign up is the on sign up prop which then goes back in to sign up on sign up sets sign up a complete to be true and then that switches it to the completed state so that's the whole application here are just a few components and I'm going to show you how to test all of them so the first thing we need to do is go into package JSON and we're going to add in our testing dependencies so let's just ctrl C this a yarn watch thing here on the side if you thought that there this code here you can also find on my github as well I'll have a repository set up with both of the states so the one without testing and the one with the tests implemented so you can pick either one you can start from the previous one and then kind of add the test in yourself or you can just have the whole thing it's totally up to you so now we have just enzyme demo here let's do yarn add and let's add in these dependencies here firstly we're going to add jest and then also babble just so that we can work with babble configuration all that kind of stuff we're going to add in enzyme and then enzyme adapter react 16 you need this in order to connect enzyme to your version of react I'm using rash 16 as of this video it's the latest version so that and then I also include enzyme to JSON and we'll be using this to generate a snapshot and I'll show you what that means in a little bit of time oh I accidentally added these as dependencies these ones are meant to go as dev dependencies I'm going to just paste those there babble just goes right there as well and that should be fine I think so if I do yarn again and then so next time are basically the difference is that you just need to write Jana add - D capital D there and that will save them as dev dependencies so that's what we need to do here we generally want to include our dependencies for testing and all that kind of stuff as development because they're not necessary to the actual running of our application as such we put them up here I'm actually not sure why this one is here usually what I do is either put all of these ones up there or all of the Babel ones here I think that one should belong there as well so we got Babel core preset and preset react babel jess enzyme enzyme adapter Jason and parcel yep so this should be fine so now let's do Jana Gator spatial that's up to date great okay so now that we have these dependencies installed what we're going to do is underneath the alias section here let's add in a section called jest and inside of here we're going to do setup bios after em and we're going to put a square brackets for an array and I'm going to write roots dir SRC full slash set up tests Jas so this is quite important I'll show you what this does um let's actually open up the jess documentation which is great for obviously learning more about just and understanding how this stuff works but if you go into the docs here and let's go down to configuring jest and let's go here to the side click on setup files after end you'll see that this is some stuff which is run after the test framework is installing the environment so after just and all of that is set up then you can run some code and prior to your tests are actually run so this is quite important here and I'll show you what this file here does so we use a less-than and greater-than sign up for route dir key which basically refers to this directory here but then we got SRC self tests so we need to right-click new file and create a file here so setup tests Jas and inside of this file we're going to write import enzyme from enzyme and then import adapter from enzyme at react 16 so we're going to set up the adapter here so that enzyme can work with react 16 if you don't do this then it will have its own set of problems you have to do this so we do enzyme document figure adapt our new adapter like so so once you have this written and this part here it will connect this automatically run this before it does any of the tests which is really important so we have this file here and the next thing we want to do is recommended by the enzyme to JSON Docs so let's actually go to NPM JS comm force left package forward slash enzyme to JSON so this is the one that we installed our for making snapshots and I'll explain more on that later but for this one here in order to use it you have to add this line to your chest configuration so that's where I get this line here from we're going to put a comma and paste that line there and then just save that file so now we have these two written we have snapshot serializes and setup files after em so let's start over here and now completed component because this one is probably the easiest to test now inside of our completed component it's entirely static there's no functionality whatsoever other than just showing a clean slate so for something like this all we need to do is a snapshot test there's no real functionality we have two unit tests so what we're gonna do is right click completed and we're going to create a new file here call it completed test jas so we have this file here and inside of this file we're going to write import shallow from enzyme so we're going to include this shallow basically is one of the two ways that enzyme has our formatting component there's the shallow mount and there's the full mount which is used the mount keyword so these kinds of mounting methods are they have their own kind of pros and cons and they can be used in different ways basically mount it mounts the whole structure down however many layers there are but for shallow only mounts the top layer so then kind of the things you can test with it are kind of different but generally the advice is to use shallow wherever possible however some people prefer to use mouth so it really gets complicated and it changes between different versions of enzyme as to what works and what doesn't for example in certain cases hooks didn't work with shallow only worked with mouth things like that so really it's just do your own research as of the time of watching this video and determine what is best for you but for a component like this with no kind of sub components no special functionality generally using cello is the way to go so we write that there and we do employ to JSON from enzyme to JSON like that and then we do import react from react we then do import completed from completed like that so just this one here we're going to import that component and we're going to write a test so the test here the string basically a defines the name of the test or what we're actually we're testing so I'm going to call it mashes snapshot and then inside of here we're going to put our test function and we're going to do Const wrapper equals shallow and then we're going to melt completed like that so I want to mount that inside of this enzyme wrapper and then we're going to do expect to JSON wrapper dot to match snapshot and that's it that's all you have to do the testing for this component is done so now that we have this out of the way inside a package.json I already have this test just script so now that you have that already you can just go over here to the side duyan test and just press enter wait for that to run and it should give us a pass so you see or say pass here and then it says one snapshot written so you'll notice here now we have a snapshots directory and if we open that up we have this file here and if you have a look at it it's kind of weird but the syntax is actually just JavaScript so we can change the language here to babble JavaScript and you see we basically have starred if saudi of tick star div span and in sign up complete and that kind of stuff so basically the purpose of this snapshot is to have a look at your component and make sure it renders correctly for example if we were to go into complete ojs and let's just say that somehow the message here got changed or it just rendered in a different way then we might have for example a spelling mistake I sign up completely or like someone to lead to the letter or something like that then if we run yard tests you'll notice what happens is it will give us an error and the reason we have an error is because it's expecting this snapshot but instead it gets sign up complex so it doesn't match therefore gives us an error now obviously if your snapshots change in the future well you all you need to do is just delete the snapshot of directory and then you can get it to recreate one say for example you wanted to change the message to sign up successful then if this is a change that you authorize simply delete the snapshot and it will wreak and give you a pass so you just make sure it's correct and then you can create that there for example he announces sign of successful so we're going to get rid of this snapshots directory change this one back to complete completed complete complete so when I say that there and then do yawn test again make sure we generate that snapshot and our testing for this component is done so now with this one out of the way now let's have a look at the favorite ortho component so let's go into the favorite author here create a new file call it favorite author test Jas and inside of here we're pretty much going to do the same thing as the other test but with a few extra things so let's have a look at favorite author first and you'll notice that inside here we have a use effect and the use effect fetches from fetch authors so let's have a look and fetch authors actually because I don't think we've looked at that and this one just uses the JSON placeholder API we can actually have a look at this one here so if we open that up you see it just gives us a list of users but we use these as authors and we just take the names this is what we have here I mean we actually have to basically mock this so the reason we want to mock it is because when we're running unit tests we don't want any external things to affect whether hunt unit tests are true or false or purely testing our code we don't want to depend upon for example whether or not a server endpoint is up online or not so anything that kind of takes a network request a database request file system anything like that you generally want to mock so you don't want it to actually perform that operation so we're going to have to mock this file here so I'm going to show you how to do that so let's go into a favorite author test is and what we're going to do is first write just mock and we're going to write inside of here dot slash underscore fetch authors so the reason we write this is because inside a favorite author that's where we fetch from so basically that's where we include this file from so dot slash underscore fetch authors so you just write that same party and allows you to mock that file so we're going to put this a little function here and this function is called a factory so the factory here basically says every time that you want to require dot slash underscore fetch authors instead of actually getting that file we're going to return this instead so we're going to return curly braces and we're going to write underscore underscore es module true so we need to do this because of a difference in the way yes modules work versus commonjs which is the required standard I won't get into too much detail here but this is basically what you have to write and then we're going to do default here and we're going to make a default an asynchronous function so we do async like that and it simply returns an array with two authors so the IDS going to be one name is test or throw one and we're going to grab this do it a second time and do test author two so we have these two here and you might be wondering inside of fetch authors here let's have a look at this one again and you might be asking well Lucas why did you only include the ID and the name what about stuff like the user name email address all that kind of stuff well actually if you look at favorite author here now I'm not saying this is the best way to do it but because we don't have control over our external API this one's just a JSON placeholder and because inside of here we're only using the ID and name to me it simply made more sense to just include ID and name now you might disagree and you might want to include other stuff that's totally up to you but in our case here we're only really using those two so I've decided to just put those two here so we have this section here which basically mocks this particular module so now what we're gonna do is go above here and we're going to include a few things so first we're gonna do important mounts from end line so this is what I was talking about is the other way that enzyme does mounting this one is a deep mountain on a shallow mount and the reason we use that is because we want to test hooks as of making this video Hawks don't work inside of shallow so we have to use mount that's basically what I was saying you know different versions different issues check your hub to check the issues page and try to figure things out on your own I'm sure you'll have your own set of problems when you're making this one but yeah you have to try to figure out how to fix those so anyways we're going to include these dependencies here so this one's pretty standard we've got mounts we've got to JSON and we got react but we're going to include one now called act so input pony braces act from react on forward slash test utils so this is pretty cool and you can have a look at it online and I'll also encourage you to check out the source code it's pretty amazing as to how exactly this works but um basically what it does is it allows you to work with state changes inside of your components within the context of enzyme so this is pretty important I'm not actually too certain on the implementation but you need to include this so now we're going to write our test so let's do test again this one's going to be matches snapshot but for this one here instead of doing a shallow mouth we're going to do a deep mouth and the other thing I want you to notice is that we actually didn't import favorite author up here and the reason we didn't do that is because we're going to do it inside of here so wanna do Khan's favorite author is equal to reply or slash favorite author like that dot default so this is equivalent to doing import favorite author from favorite author and the reason we do this here is because we just mocked this one here so when we require this we want this to be required but then we want this to use this mock here so we first define the mock and then we do that so that's why we do this in this order you technically don't have to do this for this particular situation you could still write import up here and I'll still move this to the very top and then kind of figure things out but I think this is a lot cleaner because it's quite obvious then if you know what you're doing about this one here first gets mocked and then this gets required so anyways we have this here inside of the test and then we're going to do this we're gonna write let's wrap up semicolon and then we're gonna go here gonna write a weight at async like that and we're going to do wrapper is equal to mount favorite author like that so you'll notice that we have a weight we have act we have async and we have a Seng here so what's going on well inside of our favorite author component inside of the use effect you'll notice that we do an asynchronous action we use dot then this is a promise fetch authors if you have a look here and we're obviously fetching using a kiosk which returns a promise it's async await all that kind of stuff so basically I'm by having this here what we need to do in order to test this properly is we need to use a weight in order to use a weight on act we have to use async and this one here has to be async as well so we have to write this code here so now underneath here once we mount it and once this finishes then what we do is we do wrapper dot update so this is something that is currently an issue as well which is that whenever you use mount and you kind of have state changes if you want to reflect those inside of like the wrapper JSON or like find subcomponents sub elements stuff like that then you have to do rapid update so we're going to do an update here which basically updates the internal wrapper to match whatever changes I'm have happened in this case in the stage here and then we're going to do expect to JSON rapper again and then to match snapshot so now with this out of the way what we're going to do over here is we're going to write yarn test which will run just but then we're going to do - view and we're going to write favorite author so favorite author like that basically this putt here is a regular expression favorite author there and then that will mean that we only run this particular test now it does seem like we've gotten an error it says we generate a runtime is not defined we need to open up babel RC and inside a key it's actually a pretty simple change just foot square brackets around here comma curly braces and then when I write double quotes targets double quotes again node and then current so make sure that you're using a version of nodejs that supports async await I'm not exactly sure off from which version that's not supporting it but I think it's something around eight I'm currently using a node version 12 I believe so if you use version 12 or version 10 whatever the latest version is it's probably going to be fine so you just write that there and then we're gonna go here do the yarn test again - new favorite author which only runs that particular test and it seems like we are getting an error so the reason we're getting an error here is actually because when I actually wrote the original code I was using react on version sixteen point eight so in a later version of react on not sure which version was I think was 12 like sixteen point twelve or something like that they actually changed act to fix a particular issue which was where it doesn't support asynchronous actions in the user fact hook so basically in order to fix that all you have to do is upgrade your versions of react on but we're gonna upgrade both react and react on anyways so I'm gonna go here just do the on add react react on I'll give those to the latest version and now that we've done that it should be on sixteen point twelve or later if yours isn't sixteen point twelve is Fitz seventeen something or whenever you're watching this you might come across certain issues so just be aware of that and that applies to all my dependencies here as well so just make sure that you can use the latest version if you want but just understand that there may be certain issues that you have to work around so let's try this test again and this time it should work just fine and there we go we have a snapshot and now let's have a look at this snapshot here so inside of here you'll notice we have Alice tardy I'll select I'll select here and then we have these options so we've got choose one and we've got test or for one test author too so this is actually working just fine because now this is actually using an unlock which is not this fault here but instead it's actually using our lock from here so that's really cool and the testing for this particular component is done so now we've tested completed and we've also tested a favorite author so now let's have a look at testing the form so let's go over here right-click new file for test Jas and inside of here we're gonna do pretty much same inputs as before so I'm gonna mount enzyme and we're going to do to JSON from enzyme to JSON here we're gonna do important react from react and then import act from react on four slash test your tools like that so we have those four there and before we continue let's have a look at our form component so if you have a look here you'll notice our dependencies we're including sign up and also favorite author and then if we go down here we've got our form and then we're doing the on submit which is kind of an external thing so we kind of need to mock this but there's actually one more thing here that we need to mock and that thing is the favorite ortho component so what you need to understand is that when we're using ensign here with just what we're actually doing is we are writing unit tests so we're writing unit tests and that's really important to understand because unit tests operate on a per unit basis unit tests aren't designed to test your whole application in one go it's meant to for example test a single component which will be considered a units or maybe a single function or something like that so you don't want it to be able to test favorite author instead you actually want to mock favorite author away so let's go up here inside a form to test what we're actually going to do is write just talk more and this time we're going to mock the whole of the favorite author component so we're going to do this and let's do return like this es module is going to be true and then default is going to be react forward ref and then we're going to write props ref like that and then we're going to do return and we're going to put in a fake select so this one's still going to be called a favorite author I'm going to passing the ref obviously in order to get it working but we're just gonna have one option here so option valley equals test author like that and because it's the only option is chosen by default as well so we have something like this and we're just going to do test submits correctly so this is the test we're going to be doing to make this one async as well and inside of here we're going to write Const and then we're going to do handle complete mock is equal to jest FN so just our FN is what we call a spy function also known as a mock function also known as a stub so basically what this means is that it is a function which kind of knows how many times it was called it knows which values it was called using so it's just a really cool function which allows us to do debugging and do testing so this is going into just so you can just write that and what we're going to do is create another one and call this one sign-up API and Mach equals Jess fm so we have both of these and we're going to do another mock inside of here this one we're going to call jest do mock and then sign up like that and then it returns an object es module is going to be true and default is sign up API lock so if we have a look at the actual chess website we can actually tell what those do so if we look at mock here basically mocks a module with an automotive version blah blah blah and but if we look at do mock you'll see that it says when using Babel chest cause the mock will automatically be hoisted to the top of the code block so we use this method when we want to avoid that behavior and the reason we want to avoid it in this case here is because we're actually using sign up API mock and we're also gonna use it later on in this test so that's why we use do Maki and we put it inside of here so now that we have the favorite author mocked and also sign up let's include the form through the closed form equals required or slash form default and then underneath here we're gonna write let's wrap up again and we're going to do a white act casing like so and inside of here we're gonna do wrapper equals mount form on complete equals curly braces handle complete mock so before we continue any further let's just do a quick console.log of Rafah HTML so this I find to come in handy quite a fair bit I'm when you're kind of doing testing and you're trying to set up mocks just to make sure the mocks are working so we're going to write this first and now we're going to do a yarn test this time we're going to do - - watch which will automatically watch and rerun and then can you form like so and after doing that you see that we're testing two things actually because we have form and favorite author but anyways it's broken but we're going to do is to change that real quick to specifically only run full form so we can put a dollar sign at the end or my dad said it's mentally a form test like that and that should work just fine so we'll run the single test and you see that this one here is broken now you notice what it says is that the module factory of just a lock is not allowed to reference any out of scope variables so we can't access react from out here I'm not sure the specifics of why that is the case but in order to fix this issue all you have to do is write Const reaction equals require react so we use need to include it again within the maquis and you see now we get a pass and then it gives us the form and inside of the form here we've got test author now you notice that we have this thing here which says an update to form inside of a test was not wrapped in act however we're wrapping everything and we're also mocking out favorite author so actually when I was writing this project and putting it together I kind of came across this issue and a bug me for a long time but you'll notice what happens is if I comment out all of these the error disappears so that error is gone if I comment if I only leave one of them I still get the error so I found that the issue comes specifically from this part here so whenever you do a register like that or any register in general with a ref brace so even if I just do like register like that which without required truth still gives me that same issue so this is something that I came across there's also no solution as far as I know um however this is not a gamebreaking issue the rest of the tester works fine so in order to get around all this redness the actual kind of way to mask this um to get around this issue is let's just ctrl C this real quick and instead of writing just that's right just - - silent so now that we'll get rid of this error so let's do a on test again this time it will do just silent watch on anything it gets rid of that red monstrosity so now we have this one here and we have our mount and you'll notice that our HTML output is also correct but now it doesn't show that anymore which is kind of annoying so you kind of I guess you win some you lose some so anyways we've got our wrapper here and what we're going to do inside just act whilst we're still here is we're going to do rapido find and we're going to find the input so inside a form here we've got this input here name equals full-name so gonna do input name equals a full name like that dot instance which returns the actual like HTML instance dot value is equal to Lucas so this is a specific way of doing it which works for react hook form because react school form doesn't really do unchanged well it does but it's not the primary focus so the focus is actually changing or I guess getting the value of each input and when you submit the form so that's how we're going to do it for react hook form now if you're doing your own kind of form setup maybe with the different library they have on change and the way that you do this might have to change and you might have to use like simulate instead of instance value it really depends upon which library you're using and how they prefer to do it but when you're using ensign this is the kind of stuff you have to do so anyways input name equals for name is gonna be Lucas email is going to be Lucas at a sample comp and obviously feel free to write whatever you want here and we're gonna do rapid find the form and we're going to simulate a submit so basically we're gonna cause it to submit which will then run handle submit which will run all this kind of stuff so we're gonna do find find to add in the values and then remember our test alpha has already been chosen and then we're going to submit so now with these out of the way let's have a look at our on submit you notice we have email favorite author full name and then it runs the signup function signup comes from the slash underscore sign up but we've mocked it here to use sign up API mock so what we can do here is really cool we can do expect sign up API mock dot to have been called with and you can actually look at all of these methods on the website here if we look at expect you'll see that all these methods are here on the side and you can kind of check those out for yourself but this one here basically says I'm not function has been called with specific arguments so I wanna do email Lucas at example.com favorite author is going to be a test author because that's the value of this select up here this option there and then we're gonna do full name is just Lucas so obviously notice that this one here matches there this one here matches that and this one here matches so all of these match um and the purpose of this test is just to make sure that the submit functionality actually works as expected so anyways we have that there and we also need to do expect handle complete and lock but to have been cold so what this means is that our form here we actually do await sign up and then push sign up so that's our on sign up event also our prop here which gets run and gets mocked by a handle complete mock so all of that should be working it says push sign up is not a function I wonder why that is the case oh I wrote uncomplete here this one here is meant to be on sign up that's my bad so on sign up there and then I mean this one here I guess we call it handles sign up law there is a reason I wrote complete amend this was when I was doing the testing I'll explain that in more detail later on so anyways we have this test here and you see that it's working properly so it actually does all of this and it works just fine um but then let's just say that our test was somehow broken so let's just say that our email here I don't know we were trying to find email address but that couldn't be found or something like that and you'll see that our test actually gives us an error it says that we expected Lucas at example.com but instead we got undefined for email address so anyways it's really cool it works really well this is this part of the test here however we're also going to add a snapshot test just to make sure a renders properly so let's go underneath add another test here this one's gonna be a matches snapshot like that constant form equals require the slash form dot default honestly it's the same stuff as this up here so we can just grab that section here paste that here but we actually don't need this on signup because we're just doing a snapshot so we don't need to worry about that we still wrap it in the async thing to get it working and then we do expect to JSON wrapper to match snapshot like that so let's do that there and you see we have one snapshot written we can have a look at this one here we've got full name we've got that bear the email address and this one here and we've got favorite author and then this one's still mocked is our test author inside of it like that so this is really good and that's the testing for the form component done so now we've tested form we've tested completed and we've tested a favorite author however there's one component left to test and that one is sign up now how do we test this sign up component well it basically switches between completed and form and now given the way that this one's actually currently being written it's not actually that easy to test because this component in general is designed in a way which is kind of quote unquote anti testing so we're going to go here we're going to write Const sign up switch up so we're actually going to create another component this one takes in two props completed and incomplete like that and then inside of here we're gonna do const is completed set is completed equals use state false so by defaults not completed and then if it is completed then we show the completed component otherwise we do incomplete uncomplete is equal to set is completed to be true so basically it's kind of similar to what we have done here but instead we have it inside of a sign up switcher and we make sign up a lot simpler so instead of doing this part here we're just gonna do sign up switcher and then completed it equals the completed components and from up here and then incomplete is going to be formed so now that we've done this we get rid of this line here let's just ctrl C there so we don't run that test again and then now what we're gonna do is we are going to go into the form component and you'll notice here that we're using uncomplete for being complete here so inside a form instead of doing on signup we're going to do on complete and instead of push signup we're gonna do push complete so make sure you change that prop the reason we use on complete now not on signup is I guess just to make this a little bit more generic in the future you might consider moving this out if this is something you want to do um but for us sake here we can just leave it inside of here that's not really an issue so now it's first to a young watch make sure our component still looks just fine so let's have a look at batch local host 1 2 3 4 make sure this one runs great so it seems to be fine look you said you wanna calm doesn't matter and then click sign up and wait a couple seconds and it goes there see that seems to be fine on but we're doing testing here so we don't actually want to just say it seems to be fine you want to run test when you make your change to make sure that the test still passed so the is that if you have good testing then you can tell when your stuff is working properly because it will let you know and it will error if something's gone wrong so anyways what we're gonna do now is actually our form test has actually broken because you know that now we don't use on sign up so I'm going to prove that to you by doing beyond test and want to do - you again formed our test like that and let's just have a look you see that we get an error because push complete is not a function but blah blah the test has failed so now I'm gonna do is I'm very inside of here instead of doing on signup we're going to do on complete and then instead of that we're going to do handle complete mock so that's why I had that before um obviously I'm looking at the code I wrote but I completely forgot that interaction so um that's how that's meant to work so anyways now let's do this one again make sure that's running properly and our tests have passed so there you go this is fine so now let's go back into sign up here and we have sign ups which are and we have sign up so let's go into sign up here new file we're gonna call this one sign up test j/s and actually for this component here what we're gonna do is I'm going to grab this one here and we're going to make this one export constant sign ups which are because what we're actually going to do is we're not going to test this component because that's kind of pointless but we're going to test this component here so our sign up switch so we're going to test firstly a salute import our curly braces mount from ensign import react from react and then import curly braces act from react on for sludge test utils like that pretty standard stuff we're going to import curly braces sign off switch off from the slash sign up we don't need to mock anything here so we don't need to kind of put it inside and do require and all that kind of stuff we're going to do close completed is equal to and we're actually going to create two components here these are kind of mocks they're not really we just kind of passed them in the props and make sure that they work so we want to have a completed component and also an incomplete component like that and we're going to do a test so properly switches between two states because this is the main functionality of this component the sign up switch off so that's what we're going to test heat we're going to do quantity R alpha equals mount signups which are completed is equal to completed incomplete is equal to incomplete and the reason that we use here's because we actually want to have information on these sub components there and also because we are using state and state doesn't work unless you use mount so that is what we're doing here expect rapid find incomplete Ln dot to be one so this is kind of weird but basically what we're doing is we've rendered signups which are and by default we expect there to be one incomplete and we also expect there to be zero completed so we have zero completed one incomplete at the start when nothing else has happened but now we're going to do an act and what we're going to do is we're going to do trapper dot to find incomplete and we're going to go into the props and we're going to run the on complete function so this is a way to run on complete and therefore set is completed to be true so now we run this function inside of an act because whenever you have state updates you need to put it inside of act for example you do it you say change anything that causes set state or arm anything like that you put inside of at and then we need to do rapid or update remember I said before enzyme has its quirks as of making this video any state updates won't be reflected in the wrapper or in the UM in the children or in the structure unless you do wrap it or update so we do that here and then we grab this section here we paste it down here and we swap the numbers around so one and zero so basically once you do this you should have completed and no incomplete so now this is done let's do young test but this time let's just test all of them so we're going to run yawn test and it's going to run all of our tests and if everything goes well all of them should pass and there you go you have all the tests passing everything is working just fine and for example this is the beauty of testing is that if in the future you are building something else and for some reason like something breaks inside of your code like for example inside of your component I should say you wrote complete here but you kept this one as completed or something like that um even the smallest changes inside of your codebase it's always good practice to run your tests and if you have proper testing setup then what will happen is will give you no error and then I'll tell you what the error is and you can fix it from there so it's really important to keep your tests up to date and also to properly reflect what your components are doing so let's kind of recap on everything we did here let's start off with completed the completed component is come clearly completely haha completely static and because there's no dynamic functionality or anything like that the best lady tester is simply using a single snapshot so we just snapshot it make sure it looks the same another way to do this in the future is considering like visual regression testing where you kind of actually take a picture of the component and make sure looks the same for example across different browsers and stuff like that but for the sake of unit testing this is as far as you need to go so we do a shallow mount because we don't need to care about any child component and that's what we need to do here so that's this components test let's have a look at our favorite author so for favorite author here we did a mock of fetch authors and the reason for that is because we don't want external Network requests so we have to mock it and then what we're doing here is we're just matching the snapshot once again there's no real functionality here that we have to test all we really have to test is making sure that the authors properly render on the page so we do that using a snapshot so now let's have a look at form now form is a little bit more complicated because form actually includes favorite author now because favorite author is a child of form it's actually good idea to mock it out and just keep it as something predictable for the time being because we don't want to test both of the components we just want to test form so we mock out favorite author and what we do is we're testing whether or not the form submits correctly because that's the functionality we want to test you we don't want to test for example whether the input is a certain length or whether internal state updates inside a reactor hook form are working what we want to test is more user based features like whether the form submits correctly stuff like that so we also Mach sign up here to use sign up API Mach which is a just spy we also have that on handle complete mark we add in the values we do a submit and then we make sure that it's been caught with those values and we also do a snapshot test because that's kind of important here as well just make sure all the text and everything is up to date and then we do that we mount it inside of our wait after a sink the reason we use a weight and a sink here is because inside of our form we have used form here I'm not really sure on the specifics there but I found that like basically you need to use a weight a sink whenever you have any asynchronous actions inside of the amount or like inside of the actions there you use a weight and a sink and then for the taken form here for some reason that works better I think I don't know if you can remove it I don't really care anyways it works and then we do the snapshot here for that one there and then finally for sign up we have to actually refactor our component so you see with testing is that when you do proper testing it actually can reveal our floors in your component design and in the assumptions that you've made so we have sign up switcher here which we refactored out we exported it and we tested that inside of here so guys I hope you enjoyed this video a tutorial on how to set up enzyme and just inside of your react application and I hope you also enjoyed the tips and tricks that I gave in order to test properly I hope that you will continue to do your own research and to further implement tests within whatever code that you're writing to make sure you have a robust and strong application this has been Lucas from Vetter coding Academy and see you guys later

Channel: Better Coding Academy

Views: 10,936

Rating: 4.7962961 out of 5

Keywords: react, javascript, es2015+, es6, html, node.js, webpack, coding, programming, web development, jest, enzyme, testing, ci, ci/cd

Id: 47kwx7h48dA

Length: 40min 45sec (2445 seconds)

Published: Thu Jan 30 2020