React TDD in 30 Minute - Test Driven Development with Jest and Enzyme

welcome to films and in this episode I am going to make a commitment before moving forward before doing anything the commitment is this I'm not going to open browser I'm not going to open localhost 3000 until I complete all my tests because I'm going to create something with the help of test-driven development this means I will write it tested I will fill the test first and then write a code on that reactive and then we will see how we can pass that test and some of you are not in the favor of test-driven development but let me tell you bro a time spent on writing a test now is the double time saved to maintain the application in the future yes test-driven development is time ticking but once you've written a successful test this means you are sure that your code is will not going to break in the future that's very important thing with the test-driven development but test-driven development follow some steps the first a very important step you need to write a test before writing your logic before writing your implementation that means you write a failing test you write a test what you want to expect then when you first run the test obviously it's going to fail because you have not written any code once you've got the failing test then you pass the test by writing the implementation this means you first fail the test then you make it pass this is the simple step we will follow the same step in this episode so let's get started to write these tests I'm going to use the gist and enzyme and at last when we finish everything at last then we will open the browser localhost 3000 and then we will see that everything is going to work as we have expected so let's get started and start with installing reacted so I will go here and simply try to use create new react app I will use this npx come on so I will go and px and this is some simple TDD counter and make sure you are not going to use camel case you need to use this - based system whatever we call it I don't know okay so this is done and now it's going to install react on our system then we also have this just and enzyme so chest is a testing library created by Facebook for testing almost any kind of JavaScript framework but it is most famous for react then we also have enzyme enzyme is created by Airbnb and this is going to make your life so much easy because it has many functions which are so handy that you are going to love it yes you can do some of the things or most of the things with the help of just only but it'll be good if you can use enzyme with that so after we complete this react installation then we will install and setup just an enzyme on our react app and our react is installed successfully so I will close my terminal and open this react application with the vs code so here we have the react and let's go to just and go to get started and with the get started you will get these command to install the test and if you scroll down you can see it says left react apps so we can directly go there and then we can simply see if we already have a react app as we have here we need to install all these things not chess we need to install babel jest and preset and other some things so let's copy this come on and paste it here inside the terminal and then hit enter and now we have successfully installed just to prove that we need to go to package dot JSON and we have this dev dependencies related to just only okay next you can see on this scripts part we have this test which is react script test so why not try to run this test so I will say NPM test and if I run the test now it's asking what you want to do so I want to run all the tests so it says press a to run all tests so as soon as I pressed a now it's saying that a dot test dot J's and one test is passed successfully you have created a test-driven development and this video is over okay so let's see but the point is with this a blot test dot GS came from we have not written any test we have not done anything we have just installed the gist what's the point so actually because we have created this a react application with the help of create react app command using MPX it's already having an app dot test dot GS + it's already having setup dot test dot GS file because of these two things and because of this react script test command we are able to run this test and the most powerful thing of just is that whenever it see any file with the extension of dot test dot GS it will go inside that file and find any test if it finds then it's going to run that and now it is successful for this test and that's actually a great achievement because this means we have successfully installed just next step is to install enzyme so let's go on enzyme and it says you need to run this command to install it on react 16 if you are using older version you can use other commands cool so let's space this and hit enter and now it will take long long long time to install enzyme and related things if so we need to wait for it now enzyme is also installed it so what we need to do let's now really start the test-driven development we are going to create a simple counter where we have a button when we click on that button it will update the state and that updated value of state the value we will show inside a div okay so let's create a describe so there is a describe section for just where you can combine the test related tests into a one block so I will say counter testing okay so now we have a simple arrow function and inside that function I will put this inside like this so we need to say simple test what the test will be the test will render the title of counter okay so how we test that first we will see how we can test from this code how we can modify this code and then we will see the enzyme way of testing so first we need to see we have this app yeah so it's actually getting this app this one okay and this gate by text that means get this app component and get it as a text and then it will find laundry act and I am going to find this is counter app ok now the expect part is this link element to be found inside the document so as we have pressed the Save button the NPM run test automatically detect the changes and now it says it is failing it is failing because we don't have this text inside our app dot J's so inside F dot Cheers I'm going to remove everything from here and then I will create a h1 tag inside h1 tag I will paste this and now as we have saved that it will automatically detect the changes and now congratulations you can see this first test is passing okay that's cool and this is nice but you know this is not so descriptive I want to make it more descriptive so I'm going to use enzyme okay so go to the enzyme and so let's click on working with react so we have installed all these things and now when to configure it so copy that and paste it here then we need to simply use this shallow from the enzyme okay so from enzyme it's already getting the configure but I also want shallow okay so let's see what's going on here so from the enzyme we are getting two things configure and shallow shallow we will use later but configure is to configure your enzyme so we need to have this adapter and we are saying adapter is new adapter and this you need to do for every test file you are going to create okay this is not good thing so later we will see how we can move this into some other file so we don't have to write this configuration code for enzyme every time for every test file good so let's first create the shallow what is shallow is shallow is a function from enzyme which is actually going to create an instance of your component so we have this app component so we can simply say shallow and inside we will give the component cool this will return the shallow part so constic wrapper it's a convention to call it wrapper you can call it anything okay so the main point of using shallow is it will only going to render the outer part it's not going to render the other children the component so suppose you have a component called header here this will be a simple react component but if you use shallow it's not going to render this although you will find this on the shallow but not going to inside of this header cool so we have created rapid shallow so what we can do to check what we are having inside wrapper I can say wrapper oops wrapper dot debug and it's a function that means if I save this file it detected changes now finished you can see because of this console.log of rapid people so you can see if we have this div with the h1 with the text inside that and also it is passing but we don't want this kind of testing we want the wrapper testing ok so it's very easy now we need to say expect inside that I will say wrapper dot find and as I told you the enzyme is super cool super cool because you can grab any element from anything like in you like you can grab the element from the tag name you can grab the element from class name the ID name the attribute whatever you want so I want to grab it from the tag name so expect rapid or find h1 so it will find the h1 and then I will say give me the text of that and that has to contain actually contain this text and copy this paste it and I will comment these tests save this file and now let's see the result so it's now running the test once more and yeah it's muscles and you can see it's so clean and so easy to write the test its comparable with the old version it's not too descriptive and it is complex so I will remove this one after this let's write another test and another test is for rendering a button so this test render button with text of increment increment like this and now giving a simple function here inside that function I want to have this wrapper because inside this wrapper we are going to test it so wrapper is there and then we will say expect it wrapper dot find and this time I am going to find with the button tag I'm going to find it with the ID tag so I will simply use a hash by using hash it's like a ID if you have used to jQuery hash tag for increment BTN this will be the ID for that BTN the button next we need to say dot txt once more dot to be this time I am precised I want to be increment okay let's try this and if I save this file now it's running the tests one test passed one field yeah I know one is failed because there is no button for this kind of ID where nice let's create a button I will say button here and this button is having an ID of increment bdn if I run this test that means I just saved the file still it is getting error but this time now the error is changed it says expected increment but received nothing because there is nothing inside the button so I will say increment as soon as I do that and save the file it's rerunning the test and now to test is passed yeah that's great actually next we need to create a state and then we will render the state value okay so let's create a test driven development that means we need to first write a test so I am writing a test this test will render the value or I can say initial value of state in order okay then this function and once more calling this wrapper so what I will do whenever I saw that I'm using same code more than two times I want to extract it in a single function so this just provide before each function which will give a way of running anything before any test we are running and if you don't know about before each go to the jest documentation and I will say before each and here we have the reference for that and now it says before each we just have a callback function inside that you can return something great so we have this and inside that we have a function and in this function I want to have this wrapper but I want to be accessed by any test so I will say let wrapper and then update the value of wrapper with this one this means now I can remove this wrapper from everywhere and if I save this file still it's running and we will see all theft will past yeah as it is and the last one is also passed because it doesn't do anything so that's why just say okay it's not doing anything that means it's not going to affect your application cool next we need to say here inside that we will expect again wrapper dot find and this time I am using another ID and that ID will be for the div I call it to counter value dot text dot to be zero so initially it will be zero we know and let's copy this one and as soon as I save I know it's going to fail let's see it's going to fail let's fail it yeah it is now filled and this is we want this is actually our test-driven development we first fail the test and then we write the code to pass that test next let's create a div so creating a div inside div and giving it a ID and then inside that I will simply use counter if I run this it will again going to fail but this time it will fail for a different reason it field and not only the test we have written for the counter value but all our tests are failing why is this because you can see we don't have the counter it says counter is not defined so our whole app is actually crashed now to solve this problem we just need to say use a state and I will call it counter and then we will make it as react to dot user state and now I save this file as soon as I save that file it's failed once more all the tests are failing it says the initial state is not defined hmm so we have not defined initial state and make it zero save this file as soon as you save this file again the tests are running and this time only one test is now failed to is passed previous tool is passed and it says expected zero and received zero but there is a difference expected integer zero and received a string zero so we can update our test because we know it always has to be a string and as save this all the tests are passing this is extremely good but now the next test is the real challenge because we are going to test when we click on this increment then we want the counter value to increment write a test test will render the click event of increment button and increment counter value how we will going to do that because we have used the enzyme so it's now become a breeze on this enzyme if you go on the API reference and you can search here for shallow rendering and then click so you can see click event is there and you can simply use find and then dot simulate and the simulate of event event do is click even name is click now I can simply say rapper dot find find with the ID of increment increment BTN dot simulate simulate the click event yeah we have done that and now what we are going to expect we expect that rapper dot find with the ID of ID is the counter value actually with the value of counter value dot text it dot to be one and make sure it is a string one so before that we know before doing anything the value is zero but when we click on the button it should increment to 1 and it is feeling now because now it says expected one received 0 why is that because we don't have any click event on this button so I will say on click I want to simply increment so set counter inside set counter I can say counter plus 1 now save the file and everything is first congratulation this is done actually so we have written for test and we have not opened our browser we have not run local owes 3000 just for test increment is done the counter is done and I'm so excited that I want to create another test which decrement the counter so render click on decrement button so we will need to we need to create a decrement button so decrement the counter value so when we click on the Cremant button value should be so firstly we need to increment it otherwise it will be 0 so first increment we know after incrementing it will become 1 and then decrement dn click the value and this should be zero once again so if I save this file it's now going to fail because we don't have the decrement BTN we know that and it also saying that we don't have a button so why you are doing simulate and let's create another button and this version is decrement BTN and this will say minus of 1 so call it decrement and if I save the file test is running once more and all the tests are passing so you have seen that we have not opened browser and we know our counter app is working absolutely fine so to prove this now it's time to open the browser so NPM Run is start and now let's see Pringle cross we are going to see how the test-driven development benefits us so it's now opened so we have this simple app and let me zoom it so this is counter app increment yeah incrementing Wow and what if I decrement it's decrementing and you can see as soon as I go beyond 1 that means below and not beyond below 1 now it's minus 1 we don't want this to be minus 1 either we can disable it or we can do nothing when we go below the 1 so this is actually a challenge for you you need to write a test and this test will will actually find the decrement button and if it is 0 then it will not going to decrement it will still remain 0 you need to do this and then update your app first write a failing test then complete the test make it a green by writing a correct logic of that implementation one important thing we need to do is we need to remove this enzyme configuration from this file we don't want to write this for each test file to move it into the just set of file and where it is yeah because we have created the reactor with create react app we already have this test setup test dot JS file we are going to use this file so it's very easy you just need to cut these from here but if you cut it from here save this file tests are filled and we know the tests are are failing because of the enzyme configuration so that's good and now we need to go to set up that space these two and we want this configure so we need to copy this from here and we don't want configured in this file but we want configure in this file so we don't want shallow in this file so remove the shadow from here and this means now it's going to work you can see all tests are passing and that is because of this setup and the enzyme configuration we have moved into the just set of file now the major benefit of using test-driven development is refactoring now suppose on this app door Cheers we don't want all these things to be inside this approaches I want a dedicated component called counter and now I will create a counter so I will create a new file called counter dot GS inside this I will create a simple counter functional component I will paste these things and also I want to cut the state from there and paste it here and now let's import this counter component so now it is imported and let's remove the logo we don't want and what you expect all tests are failing now so you can see every test is now filled why because it doesn't find anything inside this wrapper and that's obvious because our wrapper is the shallow of app but we are going to test now counter not the app so we don't want app we don't want rendering anything so remove these things and now save the file and all tests are passing so you have seen that with a huge confidence we can simply refactor everything to a new file and all tests are saying that ok your refactor is successful and this is the very very good thing related to test-driven development and this is I always say that a time is spent on writing a test now is the double time saved it on maintaining the app in the future but then you can say faster I don't want to directly test the counter component I want to go via the app component so I want to use app I don't want to test directly the counter app but you know when we use the app shallow app all tests are failing because it's it doesn't find that elements so what we can do so as I told you shallow means let me lock something so wrapper dot debug as we have done previously so when they do rapid debug with a shallow part it will only get whatever we can see inside this app so it will not go inside the counter but you want to test with them not with the counter there is a method for that also you need to go to enzyme documentation go to API reference and now we have a full Dom rendering what we need to do we need to just use mount instead of shallow pool so instead of shallow we just need to say mount and we need to import it on here so we have done with mount and what it will do it will actually run everything that means the app component and the component inside that so you can see we have app div then counter and then also it opens the counter it goes in deep inside the counter and then it will have all these things that's why all tests are passing with the of this mount so I highly recommend you to go to the documentation of enzyme and a documentation of just to take a look what are the various API is we have so you can see the expects API we have used to contain so you can see the two content to contain equal is also there we have also used to be to be is there we we can also say to be equal or two equal actually so two equal here we have so there are lots of things you can do and just by looking on the documentation of just and enzyme you will get the things how you need to move with the test-driven development because now you have the idea how to use just an enzyme with a react app and just using test-driven development you can be sure that everything is working fine as we have done with the counter app so it's now your turn as I told you it's a task it's a homework you can say you need to write a test to make sure the decrement button will not decrement the counter below zero so you need to write a test and you write a test and then you just need to comment that test in the comment section and I will personally check each and every comment so you can write the test let's see what your way of implementing that test so if you like this attitude please go and hit the thumbs up button so go hit the thumbs up button hit it now hit it right now and if you have not subscribed to this channel go and subscribe to this channel and follow me on Facebook Twitter Instagram LinkedIn at bit fumes and personally at Sarcoxie we will meet in some other videos till then good bye

Channel: Bitfumes

Views: 63,328

Rating: 4.8837719 out of 5

Keywords: react js tutorial for beginners, reactjs tutorial, react testing library, react testing, react testing library tutorial, test driven react, react test driven development, react js test driven development, react tdd jest, react jest testing, react jest enzyme, react jest enzyme tutorial, enzyme test, enzyme test react, react testing with jest, react testing with jest and enzyme, react testing with enzyme

Id: -bmdf1oATQo

Length: 30min 48sec (1848 seconds)

Published: Wed Jan 22 2020