Testing ReactJS app with Jest and Enzyme - Tutorial

hello everyone today we will be testing but what we are going to test and how i'll tell you in a second before we'll start remember to subscribe our channel with the red button down there and to give us thumb bumps and to turn on the notifications [Music] hello everyone as i mentioned a few seconds ago today we are going to test react.js application it's an existing application which we've done in react hooks tutorial here you will have the card i'll give you the link to the github account where you can download the code if you don't have it and we are going to test application with anson and test we will set up the environment will work on preparing some cases for testing and then we will write the test and check if our application works correctly if you would like to find out a little bit more about testing about test driven development and pros and cons of testing take a look at our article about testing react.js application and i'll leave you the link for that article in the description okay let's go to the computer okay so let's go to our github profile to get the code if you don't have one but of course if you have one you can download the same code that i'm working on and it will be even better because it changed a little bit so let's take a link and let's go to our terminal and let's clone the project cool when it's done let's go into the project let's install all the packages of course you can use npm if you prefer great it's done so right now we can go to installing all the necessary things that we need for testing and there's one more thing if your product is built with create react app it should already have dressed in style so we just need to install enzo if not you can easily install just with yarn at just okay now i've installed enzyme and a few additional packages like adapter or renderer and there's one more thing that needs to be installed it's uh yarn and enzyme to jason that's what we will be using for the snapshots okay cool we have everything installed ready so right now we can open our application and also we can open the code okay here is our application which you will know already probably i hope so and here is our code what we will start with we will start with opening setuptest.js file and we need to create adapter here so let's delete the existing code and let's import configure from amazon let's import adapter from enzyme adapter react 16. and let's define a new adapter let's use configure adapter new adapter just a new instance uh we are doing that to let enzyme work correctly in a test environment call it safe and what we need to do right now is to think about test cases that we would like to test for that let's go to the our application and let's take a look what can be the things that we would like to test so what do we have here we have the app component inside the app component we have heather so those components have to render without any crash we can test that besides that we have props that are passed to our saving balances so we should make sure that everything is totally fine with passing props another thing that we may test is our simple logic with sending 100 so when the button is clicked it takes money from one account and puts there to another account so we have to check if it's changed after the button is clicked so that's also what we are going to test and another thing that we are going to test is the notification okay if we know what we want to test we can go back to our code and start testing taking into consideration that our application is not very big we are going to put all the tests into one file of course if you have more components or if you want to build application which will be growing in a future and then of course create the tests in a proper folders in a proper files to each component okay let's open up.test.js file remove everything what's there and let's import necessary things we'll for sure need to react and all our components what i mean by all is app account balance and notification cool next we will need probably something from enzyme some methods like shallow or mount yeah for now let's just take show show is used to render the component without the child components inside that so for the simple rendering it's it's enough for us okay so let's start by checking if our components render correctly and we are going to do this in a group which will be placed inside describe function and we'll call it rendering components we are grouping our tests because we want to have it very clearly displayed as a result later okay inside it we are putting the simple test so let's check if our app component renders without crashing remember to put those descriptions very detailed so you know what's going on and why you are testing some stuff and what it actually tests besides that it can be a great piece of documentation for your application okay so we are rendering with shallow the app component the next test that we are going to do is to check if inside our app component our h1 header displays correctly for that we need to declare a wrapper and that will be our app component and also we need to define the header or you can copy paste it from objects file because it should be same and right now we should check if what's expected is equal to true so let's use expect wrapper contain header to equal true because we expect this yeah the wrapper contains headers actually okay let's go to the next test and here we will check if notification is rendered correctly the component and the same like in the first one great and the last one where we will check if the button to send our data is rendered in the accounts balance component okay so let's define the wrapper for us right now in this wrapper we will need some value like accounts uh and also we need to import mount mount is for rendering our component and child components as well so we are going to create a wrapper of account balance and we need to pass props for that we are not testing props yet but just we want to render the component also let's take the label of the button that we want to test for that let's use the text method and we are going to check if the label is correct as expected in our case this label is stable so let's try to use the string and right now let's go and declare the object for our accounts to be able to render the component which will be our wrapper so balance some number and saving balance okay and let's pass it here great we've just finished with the first uh group of tests let's go to the next one where we will check if our props are passed through the component so let's call it passing props and let's start by the first test but before we will start testing we will create our variable with account wrapper because we will use it in more than one tests also we'll create a notification wrapper variable which we'll also use in the tests that's pretty convenient for account balance we'll pass user balance and for notification we will pass user balance balance cool now we can start with the first test so let's check if a component accepts user account preps how we are going to check it we'll need to check if account props account wrapper props are equal to the props we are passing from here so equal to user balance okay and that's it for this test let's go to the next one next one we'll check if our component contains saving the balance value so if it was passed correctly and if it was placed as a value correctly so let's take a value of our savings box we are going to take it by class name and then we are going to use text method and simply we can check if the value is equal to to exactly what so we would like it to not be like a string because it may change depending on the values we will pass so let's take a create a new value which will be expected value and we are going to use it use here user balance savings balance and dollar sign okay and yeah that's what we expect our value to be equal cool let's go to the next test and next one will check if notification accepts props so tragedy balance if and if it's equal to user balance balance because that's what we are passing okay we've just finished with this second group where we were testing the props passing now we are going to test our simple logic and again let's define the wrapper with account balance component let's also define notification wrapper with notification component okay and now we would like to simulate the click of the selected button our button that we want to click is balance button and let's go and do the first test the first test will be about button click update savings because we are using the balance button so our savings will be updated let's find the savings box and let's get the text from there now let's define an expected value and it should get 100 and dollar sign and now let's test it oh and here we have a typo so let's fix that let's go to the next test where we will check if after button click our balance savings were updated as well so here again let's define the balance value by finding the balance box text then let's define the expected balance value which will be user balance balance minus 100 plus dollar sign because here we are taking 100 actually and let's check if that's correct and now it's time for the next group of tests and this test will be snapshots snapshots are used to check if there isn't any unexpected changes in our ui in in the elements of the tree that's why we are going to create a three from each component and this will be saved as the modal tree let's say snapshot and then we will compare if anything changed in our in our tree if anything will change we will be notified about that and if we changed something then we can just update the snapshot if not then probably something is wrong and we need to check check that because something happens okay we need to import one more library it's to jason it's already installed we just need to import it okay let's create another snapshot and let's create the third snapshot we'll have the snapshot for each component so we know what's going on okay it looks like we got our tests ready let's run them in our console using yarn test command and let's see okay so we failed in two places somewhere here and somewhere here so we know exactly what we where we pay out what's expected and what's received so we should take a look in our code so we will be able to say what's wrong okay i see we have the typo it shouldn't be saving balance it should be it shouldn't be saving balance it should be saving balance because it's everywhere in the application like that so we can't pass props with different name and expect that it will be fine so let's fix the typo wherever we have it in our tests and let's see if it passes now because that's exactly those you test which yeah great our test tests passed everything is cool we have snapshots we have tests we have test suits uh we have time and here we have the names of the tests that we wrote here you can see the new folder with called snapshots with our snapshot file and let's now maybe test it and let's remove a piece of code here and we will see how our snapshot will exactly itch returned as a failure and if we would like to change the snapshot then we can just press u to update it but we don't want to do it that code was correct congratulations guys you've just tested react application with me i hope you liked it and if you would like more testing let us know and maybe we'll try something else like cyprus for example thanks for watching congratulations your application is tested right now so you know if it's good it's bad and if it works as it should what do you think about testing are you testing your applications let me know in the comments and if you like the video remember about thumbs up and subscribe our channel if you don't do it yet i hope to see you all in the next video [Music] bye

Channel: Duomly

Views: 16,992

Rating: 4.7749362 out of 5

Keywords: testing reactjs app with jest and enzyme, testing react app with jest, testing react with enzyme, unit testing, react testing library, react testing library tutorial, unit testing react, testing react app with jest and enzyme, testing react components with enzyme and jest, react unit testing with jest and enzyme, jest and enzyme testing react, jest and enzyme tutorial for beginners, jest and enzyme tutorial, jest and enzyme testing, jest and enzyme react tutorial

Id: XNzVMP7Mnxg

Length: 21min 28sec (1288 seconds)

Published: Mon Aug 31 2020