React Testing Library vs Enzyme

welcome to this video where we're going to be looking at enzyme on react testing library I built this small application called Bart's burritos and it's a fairly simple up you can just add stuff to your burrito order and it will give you the current price which updates each time you add or remove an item as you can see and that's pretty much it and what we want to do here is we want to just test use an enzyme and react testing library and look at the differences so we're going to be testing is do the line item sure does the price up there do we get images do we get the description and also do we get the title so let's go ahead and just let's remove these from the basket actually right now and if you're not familiar with enzyme or react testing library the basically help you get confidence in your code by writing unit tests so I'm sure most people are aware of as to what unit tests are if you're not this video probably isn't the one to start with because in this video I'm going to be looking at how enzyme how we could implement these tests in enzyme and then we're going to be looking at how we can implement them in react testing library so what I've got here if I just close this for a second this I have two windows open this one is the react testing library we're not going to be working with this one is the enzyme one anytime I'm switching between the windows I've tried to keep it obvious as to which one i'm in so the red one will be enzyme the blue one will be react testing library we have I'll open up the application we have a basic application which you'll see is pretty much the same there's a few different data test IDs on the react testing library one as on the enzyme one is a plus the react testing library one but we do have these components in here and I will I will use this one as an example just because the 99.9% the same so if we just click on the app Jess you can see we've got some stair so we keep the order items as two what's being ordered we have a menu and then we have the order component both of these come from the components folder so we have the menu which just does a simple map of items and these items are basically coming from a dear GSM file which is this here so you've got different burritos so you have like the name the image description price availability and spice the spice written is visualized just using a chilli so if you have two spice on the key and the value is 2 you'll have two chillies so if we take a look just once more the curd and we can look at the audio Jas here we're doing if there's order items on the odd items lymph is greater than zero go ahead and show the total price and then do a quick reduce of the total cost and this updates every time when you add an item to basket or remove an item from basket this one here this particular piece of code here basically just says it looks like you have an empty stomach Ordon now that just displays when there's no items in the basket so let's take a look at menu so I've just got a section header a div that just holds some menu items then we have the burritos the breo's get passed in from a pas de Britos here and the data comes from dear Jason which is the one I just showed you the item is base that we're just adding and removing so we hold some stay up here whether it's in the order or not and we have a data test ID we have an on-click that just says you know if it's in the order don't add it into the order if it's not in the order add it into the order and then here we have remove or add and that's pretty much it we have a dear test ID on the image as well we're using item that gets passed down as a prop and that's pretty much it also this function here set order items then order items so we just Riyad them into step so if I just put this back now we can do a quick comparison before I get rid of the sidebar so you can actually see the card if we look at the set up tests we're doing the standard stuff of an enzyme where you have to do is set up test or J's file I mean you can namely no miss differently differently if you want but you have to configure well get the adapter and the configure function passing the adapter with a new adapter and then if we look at the package JSON file now this article as our second what we have in here is standard package GSM file which is very similar to this one but you can see the difference is here we have cel files after M and we just call cell test or Jes and then for our dev dependencies we have enzyme enzyme adapt to react 16 in the react testing library we just have react testing library slash reacts different packages you can pull out of testing library so go ahead and look at that if you if you wish but we're just gonna be using this at the moment so I'll close these down so let me pull up the burrito once ma so as you can see here what we what we're going to test for the menu which is the left side here this huge list essentially is when a rent we want to test at the menu renders with Aetna one burrito two burritos and we can maybe test others one in the basket so we can hit some coverage on there and the way we're going to do this is we're going to start out with enzyme and we're going to look at selecting by the data test ID which I always find can be quite tedious but I'll show you how to do in react testing library as well boards are going to be looking for what's on the page instead so you'll find that with enzyme you'll see a lot of people online talk about people test the implementation and in react testing library people are testing the behavior so if you're moving from say enzymes are testing everyone just want to get quick overview as to what's different you'll find that we've react testing library you get a small toolbox as opposed to enzyme we get a large toolbox of tools and everything else that exists in the toolbox unicorns where it may be react testing libraries get given a small set of tools and within that toolbox you have all the things you essentially need to be able to test your application and get confidence in the behavior so to summarize rather than the test focusing in on the implementation with enzyme tests I'm more focused on the user behavior in react testing library and I'll demonstrate this very short list but I want to give you a quick quick synopsis as to how we're going to be testing this we're just going to be best at doing the menu in the order we can pick up coverage for the item by rendering the item and personally I come from an enzyme background and I've eventually moved over to enzyme and I really really do like the react testing library methodology where we can essentially just help by just doing one quick install there's no configuration of a file you know both react testing library and enzyme I've great documentation let's have a look you'll find this here so you've got an FBI reference for enzyme and also of your react testing library you have a nice quick cheat sheet so we'll be using a lot of this stuff in here so like get text by query by text query by text query or by text all this these nice selectors and that's essentially what they are they're just selectors and what's going to be testing these and this is all you really need for initial setup will grab the render the structure from the render it's like get by text fine by text and then fire events also in there which is really nice which is largely to simulate clicks so the barrier to entry that I find because you don't have to do one quick install with RTL which is react testing library it's a lot easier than enzyme you'd have to set up any test file or any sort of adapters you simply just install a package in NASA so you'll find that react testing library guides us to think more with the best practices by using selectors by allowing us to make it easy to test accessibility features you know it gives us more stable tests and allows us to test the users behavior as opposed to the implementation no longer we testing props and stair we're going to be doing that from your users perspective can I click on this button and it will it updates tear and give me the correct stair that's what we're gonna be testing so anyways let's jump into the card because such a way horns here alright so let's take a quick look when I basically set up to test files and birth menu and order and I'll just close this down we're going to start the menu and in enzyme we're just gonna set it and we're going to set renders the menu with two burritos and one already in the basket now just pull this over slightly we'll do test for test I think that'd be quite nice to see so const order items equals current order items and what we're doing here we're just initializing some stuff to pass down to the component so we know that the menu component text burritos order items and set order items I'm just going to give it a jest dot F N which is just the best all your mock function so I can do tests on this and say look did it get cold and this is essentially the same across enzyme and also with react testing library course this is just they were using here so let's create a wrapper generally this is what you'll find in enzyme your create some sort of wrapper that mounts the component and we're going to be using a for mount here we're not going to be shallow mounting where we don't get the child components because I don't find that you get much confidence from that so anyways let's import the menu which is up here make sure you've got that there and then we'll say the burritos takes in two burritos and this is coming from a fixture to file this fixture file sits here and have two burritos which is just in a rare with two objects in this two standard burritos and then we want to pass down the order items so once we've got the order items which is just one order item so we want to check that the menu display is not only our burritos but there's also a functionality that exists in there that we want to test so if we just pass down to order items and we close that give it a serve so we now have a wrapper and what we're going to be doing with this wrapper is using it throughout our tests and we're going to say let's create select it to begin with actually let's do a selector to find the add item one so what is the add item one so if we just do a search add item in the item we pass down a deer test ID of add item and then we pass down the ID of the burrito which is unique and doesn't change so we can go back and use this as a reliable selector and say wrapper or find we'll pass down a date test ID do a test ID or add item one we want to make sure that's in there so by doing so we can do expect expect a wrapper find we also want to make sure that we have a length or two burritos because do you remember earlier we're not showing you the fixtures and in that pictures we have two burritos which is here so we want to pass that down and we'll say that's called item and we'll do that length I'll close that to be two then from here we'll just select this again once more and we're going to select that the item has a date test ID of spice one spice one and we want to make sure that the text of that spice is a chili so we need some sort of a merger there we are and then the next thing we want to test we want to test that the head is in there so we want to test that it's called a wet burrito because if we go to two burritos we can see that's called wet burrito and it's got a spice of one so we're gonna pass down one chili but now we just want to test that a spice is just one chili and then we want to test that ahead in so item heading one is a wet burrito and that looks good to me so I think we should start just check-in this so if I just pull up a terminal here and then we'll run this Yantis coverage watch all false we should hopefully get some expectations and there we are we have some failures and oh I can see we need with I've written that wrong so if we just put that in here and then we should have to do is see ya dere test ID equals item dot LEM I see I see I see you need to go there and also you need to get there so we've out yellow I have to do this and I kind of fall into the the bracket of hell I would call this where you can easily put a bracket at the wrong place and then you test up fairly I mean it's great that tells you but it's not very great when you're having to write those out and you want to get through as much as possible so that one's going to fail which is good because we already know there's no test in order dot speck but if I just go ahead and I say we should have in here a public and public sorry let's look at test source fixtures we've got the self file pull this up we should have a coverage file and a coverage folder should have a coverage folder so clicking here click into index dot HTML fixtures we won't worry about we can remove that it doesn't make much sense to have it in there and you can see that you've got entire coverage but we still want to do some expectations around what's going on so I'll keep that up and for now I'll just take that off the screen so don't want to distract you but I have one pass one failed would have to worry about the failure and we do have these are passing right now but we still want to get more confidence within our tests so what we're going to be doing is I'll clean that terminal shell we want to write some more expects so if we go ahead and do let's pull that down I want to say instead of the head in here we want to switch this to the description and you'll find we unit tests this is pretty much one of the quickest ways to just target things so if you just do your wrap it up find an enzyme text check that the text is there and you expect that to be on the page at that particular time and likewise you can just keep copying and it speeds up your workflow so here we're going to set item set image 1 actually because we do need to target that image and make sure that we've got some sort of image but instead of doing the dot text we want to test that the proper and this isn't a property in react this is drinking for the alt so if the image is there we should expect to have an alt text of wet burrito likewise we also want to test that the image source is correct so in enzyme you'll find that this is different to react testing library and I do find with enzyme that I'm much prefer seeing slash images slash say in this case wet burrito in react testing library you'll see shortly that this is actually different so I can go ahead and run this test one more time and we can see that hopefully there's no Elias and that these expectations are correct if not we can jump back in refactor the tests but we have the standard one the ones failed that's great but we have expectations and you see that we've got the entire coverage on menu but I want to go a little further I want to get as much confidence in this application and this particular components I'm going to keep going and what we're going to test next we're going to set expect selector so I'll select or above text to be ad wet burrito and this selector for us is the five pound burrito and we want to be able to click that button so we'll do wrap it up find and we'll do brackets and there a test ID equals add item one and we want to be able to simulate some sort of click on the button so that we can test from our perspective in the users perspective even though this is what we'll be focusing more we've focusing more on with react testing library as the poster enzyme but we want to do a click so we're going to simulate click and once that click has been simulated we want to test that the add item one so the button text for example has change to remove wet burrito so if we just look at what we've done here we have the add item one here which is the selector and we could use this particular selector multiple times so in this case I think it's glaringly obvious that we should just copy this do the dot text again and once who said remove wet burrito that basically is simulating that buttons being clicked and then the text is changed on that button and then what I want to do again we want to test that we've clicked it again and it goes back to add wet burrito so once we remove it we want to be able to see that it's the text has gone back so let's have a look at this and that should give us good coverage granted it was 100 percent before but you get a lot more confidence in your application knowing that you've done an expectation around everything the user can possibly do with that particular component so let's go ahead and run this I'll give that a clean shell and if we run this we should hopefully see no failures apart from that one where the test files empty but we will get to that but in all we have a failure well that's good so remove wet burrito there we are we should have a pipe as opposed to a removal so if we look here we've done expected to get a pipe but received a - so in my case I actually believe if we're showing let's have a look at the coverage so if we go to not the coverage or if we got to Bart's burritos you'll see that we have a pipe but then we're getting - I think it's probably better if we change the component of item as opposed to removing with the - to put a pipe because we want to be consistent in the application so in this case the test should now pass but we have changed a small detail in the component which I think was very necessary in this case and here we go your test suite must contain one particular test and we've already mentioned that we've still got a 100% coverage and we can see that by pulling up the code coverage here it's a little bit bigger you can see we've got what a 1x which basically means it's run over the manual once and we're going over the section which is the menu once but you can see here you have a 2x which is basically saying okay we've got two burritos which we expected right because we've provided this component with two burritos from the fixture file we've mapped over the burritos two times so we should have two items fantastic so if we just go ahead and move that out the where and the next thing we're gonna do is start looking at react testing library how we can write this menu dot spec file in react testing library so this was fairly a big somewhat of a big file just for one small component and we extensively tested that everything was there really so you know the image the description the head in can we add remove and Riyad a burrito and that's kind of what a user would be doing so we want to do that now in react testing library look at the differences see which is easier to read see which is easier for a developer to just begin writing tests whether it be a junior developer or a seasoned developer which one makes more sense as well from a development standpoint so let's go ahead and start writing the tests in react testing library you can see a small difference here you have mount that is employed from enzyme in react testing library you have render and fire event granted you don't have to pull in the simulation for a click from enzymes package but within react testing library you can pull in fire event so you're pulling in basically just the stuff you need and in this case we only need the render because we can structure everything we need that are there such as get by text as shown here so you can get all the stuff here so you've got your selectors your queries so get by I find by query by getting all by find all by and query all by and we're going to be using some of those and we're just going to get them out of the render and we're pulling any fire event so we can do the same as what we did in enzyme where we simulate a click so let's go ahead I will pull this over here and let's start right in this test which was the enzyme test for the menu in react testing library so now what we can do if we just scroll up a bit on here we can just essentially copy this and we'll have that it look close that and we'll ser here is will pretty much grab the same two constants and then instead of doing wrapper equals mountains what we're going to do is Const and then we'll shout the structure so get all by test ID get by test ID yet by text get by alt text we're going to be using these selectors for out whether people call them selectors query selectors whatever there may be we can select there by them so we can rubbed it by the test ID by the text by the alt tags so yeah and we can get these out of render which comes from react testing library up here and then what we can do we can pretty much just get the same component paste that in there and we can start writing our expects so instead of doing the selector what we can do here I can just do expect get it all by get all by test ID and we're going to query for item and then we're gonna check the length to be two which is pretty much the same as this and you can see if you just look at this from a readability standpoint you'll see that this makes a bit more sense to somebody who probably hasn't seen any sort of testing before or any sort of programming language from a perspective of someone who's never used it you can just look at this and think okay I want to expect get by test study sure not many people know that but if you do expect get by text to be a spice the chilli spice the merger you could probably understand what's going on there so I like this a lot more than what we got over here but let's continue on you're not going to show you how we can write the text the head in and we can just basically just do expect get by text which is my favorite selector what verita and we'll just say we want that to be true fair and we can just pretty much copy all these and set an amazing Marita and I think that was spelt with a lower kiss yep and then down here we want to also check that we can get the alt text so we'll set get by alt text and then what we'll do again is we want to get by test ID which is the image so we're just going to give it the test ID of one and then we'll check the dot sauce and then one instead of to be true fear also to be let me run this and I'll show you the difference in react testing library versus enzyme and this is where I believe enzyme wins simple because I like this formats this relative path as opposed to the well you'll see shortly let me let me run this right now it's if we back out of here I'm just a testing RTL and say yarn run this and we can just scroll up and we can see that it's expected to have this relative path but it actually give us the full path to the image so depending we hosting your images whether using a relative URL or you just giving it the full URL you could be using a development local development which switches out this URL and it could potentially break the tests if it goes into something like a team city for example or circle CI so you have to be a bit careful with that because depending on where this has been run whether it's been running HTTP HTTP whatever it may be you could have failing tests so this is one thing to watch out for but can fix that test by just putting that in there but also do check this in whatever environment it's been running whether you got a test environment or whether you're running this through some tough test suite just be careful when it comes to the images as I have proper I've managed to have a few problems with this before I believe it or not but let's continue on next we shall close this down I just say expect get by text and we want to mimic this here so we want to say can we get the ad wet burrito and you'll remember previously when was that to be true fitness as well you remember previously that this had a day I think it may have been this one it had a - as opposed to a pipe so I want to show you a feeling we'll look at the failing tests and if you do have a failing test like we've enzyme you can do something like console dot log wrapper a debug and to mimic that in react testing library you just grab debug and you can run it here so let's just test that now so we can see the debugger working so we can do da click fire event da click and we'll say get by test ID add item one so let's just see where we're at so here we're simulating the clicking enzyme and here we're just doing fire event click so you can see the difference already by just seeing how much shorter this is and I'm much more readable this is then I want to do this in enzyme this just looks very messy so we can just copy this and we expect now that this should say remove wet burrito - well pipe five I think the reason I did - before is it shows that you're removing the 5 but I just serve be consistent in this guess and then we want one last expect to say essentially this that it's gone back to normal once we've added then removed and it should show add burrito again so there we are nice clean test file it looks really nice in my opinion as opposed to this but you know that's just my opinion take it as a fact because it's definitely not theirs usages for enzyme as there is usages for RTL sort but just go ahead and run this test and we should have a failing test hopefully and we'll check the failure which is in item and it should be there we are we've got one test we fill in already so should have - there we go and it's saying it cannot find it but you can see with the debugger if I just make this full screen you can see with the debug that we've actually got all the items coming through which is nice so all the html's there and we can just go through and we can have a look that what we're expecting is actually there or not so you see here it's failing on this bit so if I just close this down a second and then we go into here and put the pipe back go back into item clear that out run that test so we have one failure for the empty test which is order yes and we still have the debug in there but you can see that we do not have normal failures so let me go ahead and check out the e debug we should have a nice clean test suite and we've been here let's just grab this which we all come to change in a second once we've done enzyme version of this will just put hello and then we shouldn't have a failing test there we go to test pass brilliant so you've seen the react testing library version and you've seen the enzyme version and if I just put these together and do a quick comparison get rid of debug there we go and as you can see you have 44 lines for this one here on the left which is the enzyme version and over here with the react testing library version you have 36 now don't worry about too much about lines because it obviously doesn't make too much of a difference depending on the limit of the IDE our code editor that you're using obviously some will wraps and will not what you have to worry about most is just what makes more sense from a readability standpoint and can you look at this and quickly see what the test is doing this you know I have to look at it for a bit and to fully understand it but with this one it's just nice and clean this is how I would expect to see a nice clean test and granted it's only doing somewhat trivial stuff at this point but it seems to me from a usability standpoint or a developer standpoint that if you just take a quick look at this you're just browsing through the folders and you see this you can pretty much understand what's going on so what we can do here if we take a quick look at the coverage reports so on the left side we have enzyme and on the right side we have react testing library and you can see they're exactly the same even if I just zoom in hopefully you can see that you can see that the items being covered because it gets run through kind of somewhat of an integration test by using the menu and you can also see it over on this one in react testing library the item is getting called twice whereas with the item in enzyme it's being called once so if we got a 4x here this is going into the state four times it means we're calling this particular line four times whether that be through an action as the users clicking and we're you know making shows in the order or whether it's set in the order of the user and you can see down here we've got two actions in here to kind of accommodate why I just mentioned and then down here we're in the in order which is good so we are doing the remove on the add we can see that's being covered jump back and we can look in the menu and zoom in here so look we're a hundred on birth here which is nice that's what we're aiming for again here it's run the menu one twice sorry and then we have also got one hundred percent coverage we're rendering out two items components and then we're just doing one here it seems we've react testing library tends to render the item twice as in it's gonna render it once and it'll render again as opposed to enzyme where only renders it the one time any RTO experts out there can probably tell you the difference as to why it does this there may be some architecture under the hood that it's needed to do so but it makes absolutely no difference in terms of the test time or anything along those lines but I just wanted to give you a quick coverage report and show you how that looks and next what we're going to be doing we're going to be looking at the order spec over in enzyme and once we've done that we'll write it over here in react testing library so if we just copy that you have it serve give that set to we've got the mount in here from enzyme just like the previous file we have the order component in BA files we have the two breo's from the fixture and you'll see something a little bit different in here which is the before each cleanup and we're getting the cleanup from react testing library and the reason we're doing that simply is on each particular it it's a ratio of a test so if you go from one test to another test we want to clean up the DOM whereas with enzyme it'll clean it up for you and we've react testing library if you don't do that in there you could render out the Dom once and then render it twice and you could have a failing test because you've still got elements from the previous iteration that I still suck there in the Dom so let's take a look at order dot spec over in enzyme so we're going to be taking a look at this order dot spec you can still see we're still in the enzyme workspace as with this one we're in the testing RTL works best the cleaner actually coming from a JavaScript background before I react myself you'll notice that we're doing this before each to make sure we're doing the cleanup has just mentioned but I guess the most specific terminology as to what's going on is it's cleaning each render each time within react so each time this test runs what we're basically doing is unmounting the reactor ease that will amount it by using the render and failing to say coal cleanup if within this before each when we've done a render over a component not only results in stuff like memory leaks if you've got a bunch of components in there but you will get errors and failed tests due to the stuff of the component laying around and it's very difficult to debug so if you run in iterations over various components that are the same make sure you either use before each after each and you pass clean up in here it can actually use this as as a function itself so you could just like invoke it like that but do that obviously in a before each or a after each so this test is going to be a little bit easier and a little bit quicker to write we can go back to the previous file and simply you know it's just grew up the mount out of there so we'd have to rewrite that once more and then in this it arrests you can't just say all it renders the order summary with two burritos and that's basically what we want to check want to check if we give the order component a prop with all the items of two burritos are those two burritos in there and if so agree we can make these tests more extensive by checking for like different types of Boreas if you know just really going granular on the test but for this video I wanted to give you a quick introduction as to how we can do this in both languages languages both packages so let's go ahead and just do order and then we're going to passing order items in this case we'll set the burritos get rid of that and we'll save that so that looks good to me we can start using the wrapper so let's just say expect and we're not expecting export so I'll get rid of that in a second let's get rid of that so it doesn't confuse anyone will say expect rapido fine and we're going to set data test ID equals order item because we have that data test ID set in the order component which is in here and I search for order item there it is that's the line get rid of that and then what can do we can just do a dot length and we're going to expect this to be too similar to what we did in the previous file and then in here we can just copy that and we can say okay we expect the name again we already have the order name but we're just passing in the burrito ID that never changes and we'll say the text and we'll say we want it to be let me grab the burrito emoji wet burrito so there we are and likewise we want to do something similar with a spice so in here I'll say order spice one dot text to be chili perfect and then I think we had a name in here so we had wet burrito I didn't actually add in any sort of bright off the menu but the order we want to get them to order as soon as possible so no make them a bit hungry by showing them some some very some larger so here I should sir the Aden in are expecting for the older name too because I've already got an order name in there let's take the burrito give me that one quiz split these up here so I'm say okay these three lines are for the first burrito the second one can be save that for the next burrito which from the fixture file you will see it's called pon sure the Rita and then likewise we want to make sure that it's not just showing to one chilli we want to chilies now and then down here we can do another it and we're gonna set it renders the order summary with no burritos because we don't just want to check that it's rendering the oddest summary two burritos or vibrators or whatever it may be we also want to see that the component can handle no burritos because that's a real scenario when you hit the pitch so we're going to give the wrapper in there and we're going to expects wrapper dot find data test ID equals order head in nothing and then we'll say text to be and what was it let's have a look order it looks like you have an empty stomach garden now perfect save that and then what we can go ahead and do I can run this test testing enzyme and we'll just run this and then we can get the coverage as well to make sure we have a coverage hopefully this test runs and we've got a perfect test there goes the menu that's good let's get the order Oh what did we get we have two chilies and it's expected to Chili's we've give it one and this test is failing on renders the order summary with two burritos so did we give it Oh make sure you pay close attention to what you're expecting here so we have the wet burrito which is order name one and then we have the odd name order spice as one order name too because these the IDS from the fixture file save that and we can go ahead and run this one smart and hopefully that should fix our test in enzyme and there we are perfect so now we have 100% of the statements the branch the functions and lines so if I pull up the coverage file now you shall see that we have 100% coverage and we are on to a winner so if I pull this up here still the Simmons in the menu enzymes hitting it twice now which is great and then if we're doing let's have a look we just did the order zoom in and this also it's hitting it twice now so reacts testing library actually hits it twice and so does enzyme so we must be rendering have a look so we've got the hopefully everyone can see this we have the order with the order items and we're passing in the order items twice simple because we're running a small test twice likewise we the menu so let's go ahead and look at the menu there we are nice perfect some perfect tests so yeah when I was comparing that with RTL earlier we I did mention that it was running it is it running it once or twice and if we just got quickly take a look at the menu so if I just close this down we've got the menu which is here in its undescribed lock which is running the the test for the menu and it seems to be hitting it twice still a little strange while I hit it twice when it's only rendering it the one time here in the mounts likewise with the audit you kind of expect it to because it's mounting it twice but nevertheless that's a very miniscule detail i'm sure someone from either the contribute was also on who is an absolute expert in both of these will be able to clear that up but what we want to focus on is getting confidence in our tests and this is not a bad test actually and i would add more in here but there's obviously a limited time and you don't want to go as mentioned earlier to granule in what you're actually testing you do want to test as much as possible that to get as much confidence so now i want to show you how to do this in testing library so if i go ahead just pull this to the side here and we're just going to copy this because we're essentially going to be using the same iteration of this test but i'm gonna show you how to do it in RTL and one of the things is don't go too overboard we've right in as many well writing this up manually all the time it's very easy to just go in like I have and switch these out and we're just going to go to the order item switch out the two burritos to leave these lines serve that we don't need all this anymore we just basically need to get my test get all by test ID to make sure we've got the two in there like we did they're always going to use to get my text in this case so now we can just scrub and expect up here and we'll say what we want is get all by test ID or the item length to be two and then I'll say here get by text and we need a burrito so let's go up one from here actually we could just steal that I'll steal it okay so we need to get by text and we're going to say that we want the burrito to be in there but we don't care about the length number we just want to just say to be to be true fer likewise we're going to do the same for the chili so let me get the chili as well so if I go ahead in here change this to the chili and then I'll take I'll take both of these actually because this one here as you have seen in enzyme this one right here we want the poncho burrito which we're going to replace this with and as you can see down here we use in the when no longer using the test ID in react testing library we're just going to set is there to chilies on the page next to each other and we expect them to be true so it's just clean the salt and lastly what you also want to do what you were doing a second for enzyme which I haven't had it in we want to check the price so we're going to actual what that one in there that would be that would not work but we just want to say does this come 212 pounds and we would expect so if we look in the two burritos so you don't expect 5 + 7 yes that's right 12 pounds and we could individually check these as well so if I just pull up a let's have a look here Bart's burritos we also have a price so it could also check for this so let's go ahead and check that five pounces so if we add the wet burrito then we add the poncho let's check that it's five pounds five seven seven and then taught the total should be twelve and we can just let's just put it like that that's fair enough so let's put that up here and firstly before going back in just making sure the text is in there for the five and the 712 we want to just finish this lust test which is this one right here Wiccans pull it over and we say renders the other summer with no burritos and we can say render get by text and then we're good and just gonna say expect we all couldn't steal this actually and what we're going to say instead of doing by text was again it's gonna go back to our good old to be true fair and there we are we've done get by text here expect get by text should be there and to put that there that looks good to me so let's go ahead run this see if we can get the same set of coverage and then we'll look at them both in a second and there we go everything has passed 100% on everything and if I just pull up the coverage for our TL react testing library refresh got back 100% on absolutely like everything here item that gets rendered by the menu but let's check out the order as you can see for four statements branches functions but yeah it looks good so yeah that's RTL I'll react testing library however you want to abbreviate I'll say it fully I mean its fullest form we do have to go back to the enzyme test right now and we have to make some slight modifications so we can get the price which is 5 so if we just look at order and then we can see that each I think it's the item there should be a sign oh no I look into the order dot spec order J sorry and we're going to be looking at the price or here will be the price in our TL you can see it's much easier to do this you don't have to actually do anything but just expect the price to be there so one thing you could do here is we obviously need to check for a test ID of some sort and we have one here so what we could do it's already in a span and we're going to do an adjacent span which gives us a test ID of order price that seems to make logical sense and then what we will do here we'll just put the price in there let's just see if that works now what can go back we're going to test in enzyme close that down just sort fluido get any sort of failures I'll just pull this to the side for now because we've kind of done with the RTL stuff at this point so in here what we're looking for is we want some self price so where we've got the spice let's expect the price to be order price five and then we should because we're rendering this out two line items here we want to make sure that this one comes in a seven and then also the total price here is going to be this order total so we can use that as well and we'll just say order total and that should be twelve so if we go ahead I'll just close these nicer I've run this test in its fullest form and hopefully we should have 100% if not we can always go back and modify that's what's great about this we're doing some modifications checking our tests all work there we are five so we run into some trappers before that I did in enzyme because I always seem to get a deer test out he's wrong when I do with a copy cell here you got the five and also here should be the two and that should fix it it's only one failure so that fix should hopefully just run shred through figure out let's past we have the menu brilliant and then we have the order so as we can see we have you can get a hundred percent without actually checking certain stuff on the page whether that being enzyme or react testing library or some other library that's out there that does your unit tests or integration tests what we want full confidence so that's why I wanted to add that in now I wanted to make sure that we have the price not just for react testing library but also for enzyme so if we just do a split comparison here you can see as I guess when I read the bill it standpoint this is quite messy and you can these ways to sort that out but I just love how it selectors like just being able select by text and not using debt test ideas everywhere only where they're actually needed but yeah I absolutely love testing library I was a former enzyme user and I have made the switch so yep 100% on birth that's react testing library versus enzyme so I guess in this video what I wanted to focus on was showing you the differences between enzyme and react testing library how you can write testing buff how enzyme also does allow you to write from a user's perspective whereas you can also do the implement implementation testing where as react testing library kind of forces that on you and I think that's a good thing and if you are moving from enzyme to react testing library I recommend having an up and and just be willing to think about your test in a different way be willing to think from a user's perspective and not about what sort of props get passed in or how will you handle steer I strongly believe that react testing library is along only just getting better and better and even in its form now it's absolutely incredible and it allows me to write tests quicker there's more context to the test if someone's reading them users who I guess up in this file I say users developers can easily take a look and figure out what's going on and I did mention like enzyme is far more complex bluffing internally on externally and I guess it's a fairly slot to implement support for like new react features as mentioned like hooks for example whereas with react testing library it seems effectively we don't have to wear for that support to come because react testing libraries built in such a way that you are testing the behavior when we don't care about how react is doing some sort of rendering as long as it renders those particular components or components that you care about so react testing library only basically cares about the endpoint what's shown on the page so the buff enzyme gratis and Libre have great documentation as I did show earlier and I'll quickly show as I wrap up this video and I do believe I can say from my experience enzyme allows you to lean towards testing the implementation such as the stair and the props and everything else in between whereas you know RTL just leans you towards testing the users behavior you can just see quickly from these files which is a lot easier to read and now also I think when I started using enzyme and then I started using react testing library later on in my development career I found the barrier to entry for react testing library was much much lower and teaching junior developers how to write unit tests now granted we didn't test absolutely everything here because I wanted to keep this video as short as possible even if this is like an hour long book I want to show you that it's very easy to get supper set up in a testing library and with the testing library cheat sheet and yes just cheat sheets out there for enzyme but you know you can find this that cheat sheet fairly easy just go on there you can understand what's going on get by text makes so much sense to me just by using that function and we can just test ice on the page so I guess to wrap this up we accessing library give it a shot it guides us to think more about the best practices as I mentioned like we're we're the beginning in this such stuff like accessibility selectors all this cool stuff that just basically allows you to write very simple and elegant unit and integration tests test as much as possible because that's where you get a confidence you Saul I could easily hit one hundred percent on this test but we didn't have many expects in there nor if I was to put this into some sort of production environment or testing environment before going into production I would write many more tests in these files I'd obviously test for stuff like the loggers there the headers there or everything a user would expect to see that I've implemented in my development process so let me know thoughts which you prefer and if you're a react testing library user you've never used enzyme you know great fantastic also do feel free to check out enzyme to see how you can test in enzyme because you know these packages and these libraries and everything else that you I guess install as you start seeing all these dependencies dev dependencies do change quite often so it's it's nice to pick something that was very easy to learn but yeah we could in the future look at some more advanced stuff you know start looking through you know just and how it could mock stuff and start using spy on and all the good stuff we've been testing I really really do enjoy testing it gives you and so much confidence in your application and also I guess it makes you or it's made me a much better developer by learning what is actually being rendered and it allows you to sometimes change the implementation when you realize you've actually hunt down the wrong the wrong path but yeah thanks for watching this video it's much appreciated and I would love to hear your comments on enzyme and react testing library

Channel: LogRocket

Views: 5,763

Rating: 5 out of 5

Keywords: react

Id: SyAYO5w-nUI

Length: 60min 12sec (3612 seconds)

Published: Thu Dec 12 2019