React Testing For Beginners | Abd Alwahab | Skillshare

React Testing For Beginners

Abd Alwahab, Software Engineer

React Testing For Beginners

Abd Alwahab, Software Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
19 Lessons (2h 39m)
    • 1. 00 intro to testing

      9:10
    • 2. 01 install and setup some tool

      10:48
    • 3. 02 create our test file

      9:25
    • 4. 03 prepear our test file

      10:20
    • 5. 04 write our first test in react

      13:18
    • 6. 05 test advanced jsx code

      11:49
    • 7. 06 advance snapshot testing

      11:07
    • 8. 07 more about advance snapshot

      10:51
    • 9. 08 test react router components

      12:21
    • 10. 09 test the navbar and some best practies

      8:41
    • 11. 10 intro to test stateful component

      5:43
    • 12. 11 get the component state in the test

      4:56
    • 13. 12 test component functions

      6:55
    • 14. 13 another example about testing component functions

      3:57
    • 15. 14 snapshot testing with stateful components

      2:55
    • 16. 15 redux react testing

      6:34
    • 17. 16 get the component ready to test

      7:46
    • 18. 17 test the react redux component

      6:58
    • 19. 18 finish the react redux testing

      5:15
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

8

Students

--

Projects

About This Class

Hi, && welcome to the React Testing For Beginners, the course that will take you from a beginner react developer all the way to become an advanced react developer. in this course, we are going to learn to react testing by writing tests for 2 large real-world applications and it's completely a project base so there is no time wasted on unnecessary content. we will start from scratch all the way to more advanced topics. 

Requirement:- 

00-code editor

01-web browser

02-knowledge about the react

Meet Your Teacher

Teacher Profile Image

Abd Alwahab

Software Engineer

Teacher

 

Hi My name is Abdalwahab and I am a Front-End and Android App developer with 4 years of Expereance I used to Teach people how to code and Make Their Living Through Coding I have taught about 10,000 Students around 132 countries and I have the passion to become Top Code Teachers in the World and also I have 4 Android Applications that been used by 20,000 users around the world Love to Code and Learn something new every Day . I build Web Aplication For Customers and also for my own bussines . I built 15 Web Application With JavaScript Like Face Detection App , Study Tools , Music Players , Chat Systems , Games and much more.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. 00 intro to testing: Or I'm offense, or it is time for us to talk about with ACT testing, how we are going to handle testing, react because it is really a big part of your job that you are writing tests. Maybe you are not going to see it in the area requirement. Some of the jobs will, they will ablaze. That testing is required, some of them will not. But when it comes to job itself, you are going to write this, right? So you have to know how to write test. And by the way, it tests are maybe a bit confused. But do you know why it's confused? Or a lot of people says that testing is a bit intimidating at first because there are a lot of tools for testing. Second, there are a lot of opinions about testing. And lastly, the idea of testing is really, I mean, it's not a clear, alright, so for example, if we all, we all know that two plus two is equal to four. Alright? But I want to test if two plus two equal to four. So it doesn't make sense at the beginning, but you have just to read, to write a lot of this just to get used to it. And at the end of the day it can make a lot of sense. So once again, in this video, we are going to be introduction to testing. And we are going to spend so much time with testing, right? But once again, you have to keep one thing in mind. I'm going to focus on React testing because this is a React curse. So that's why I'm going to focus only on React testing. This section will be really, really, really focused. There is no JavaScript testing or there is no fundamentals or time that you are going to waste on testing the stuff that we are not going to deal with it in a real life situation, I'm going to focus on testing React components, react redox, stateful component, this kind of stuff. So it cannot be really used in a real world situation. So first of all, let me show you the application that we are going to use as a tasting playground. Here is the code. Feel free to go ahead and jump to the resources for this lecture and download this project. And so we can be on the same page. By the way, here is the project in VS code, and here's the project in Google Chrome, you guessed it. This is the exact same application that we have built at the beginning of this course. We are going to use it as our first example with testing. And you can see we've got a pretty good amount of let say or functionality. We have React router, we have searching, we have sorting, we have all kinds of stuff. Search really good, or it is really challenging for us to go ahead and implement testing for this, for this specific application. And here is my Windows. I have my tabs wherever. I have Google Chrome alphabet. I have VS Code or wind, as well as this abbreviation or these images or these illustrations. We are going to use them to clarify the idea because when I'm talking, maybe I'm not gonna let say convey the idea may be my English is not good and all kind of stuff. So I have to, I have decided to create an illustrations that will help us understand better than I am talking. And by the way, you have access to all these teaches, illustrations, all BDF kind of stuff as helping or helper, stuff that it's gonna make your learning process so much easier. So feel free to go ahead and download them if you would like. Now it's time for us to go ahead and define testing. Once again, I'm going to go back to my principal while learning anything, we have to ask ourselves a three main questions. Number one, what is this thing? How we are going to do testing and why we are going to use testing. So let's go ahead and answer our these three questions. So Testing, testing is the ID of ensuring that the code works as expected. So this is the definition that start from here all the way to here. So testing, what is this think testing is the idea of ensuring that the cord work as expected. Now why we are going to use testing where? Well, it is just used to improve the code Gua equality and prevent parks or issues or errors in the code. So this bar graph right here and CR, two questions, what is testing and why we are going to use it. So testing it is the idea of ensuring that the code was work, our work as expected. And it used to improve the code equality and prevent all errors and bugs in our code. Now what is the benefit of react? Alright, the library act, why do we use react really? React. Ru is used to build user interfaces, to build layout or to build front end applications. So when you say React testing, it is the same as you say UI testing I1 to ensure that the UI was rendered successfully. So React testing, it is not the same as JavaScript testing. Keep them on in mind. There is a huge difference because when you are writing JavaScript test, you may be, you are going to test and object. You are gonna test an array if it's include that item, if it is not. But when it come to react testing, I want to ensure that the layout was rendered successfully or correctly with no errors and no bugs. So this is about the act testing. We are going to focus on really important stuff right here. Now let me go ahead and talk about the second question or the loss, sorry, the third one and the last one. How I'm going to write test. If, let's say if someone asks you how you are, again, how you are, how you can test a React application. Then you can immediately ask him or her or wherever telling them, how did you build this React application? Did you use only react or you have used React and Redux or react talks, which is like the new implementation or the new generation call to call them wherever you want, react hooks. So either you have used React or leap. I mean the next stateful under stateless component. Or you have used the React and Redux, or you have used React hooks because each one of these has a different type of testing. React to react hawks and react the normal one, maybe have a similar stuff, but ADA, as a general rule, we have different types of tests for each one that you can see on the screen. So I want you to be here and aware of a type of testing with React. We have react itself like class-based component, functional component, this kind of stuff. We have React and Redux as we already learned. Like for example, reducers, actually creators, store, provider, all this kind of stuff. With React talks, we are going to learn more about them in the next few sections. And we are also going to talk more about React hooks, texts, testing later on. So now let's start from the beginning we organize, we will teach you each one of these, how to taste, test each one of these. So to be fair and to be a complete guy or react, you have to note, test all of this stuff because you don't know what is the type of the application that you are going to build in the future, and what is the tools that we are going to use wherever in this video, we have just introduced you to testing in general, what is testing? Why we are going to use testing and also have showed you how to test a React application. Once we get to the question, how do I test React application, then immediately we have to ask ourselves, how do we build outdoing pelt this or how it is obligation was built. I know it was pelt in React, but which type of reactor that you have, you have used to use Redux, deduce all the React, or you have used React hooks. In the next video we are going to talk about the first one. I have built an obligation with only react. How do I test it? If you want to figure that out, see you in the next one. 2. 01 install and setup some tool: Are our friends. So in the previous video, we have just introduce you to testing with React, and it is time for us to go beyond the scope of introduction. So here we have asked ourselves 33 question and questions as I mean, and we have told you that, you know, you need to know that the type of reactor that the application was pelt with in order for you to identify the type of tests that you want to go with it. And you have I told you that we want to. First of all, let's let's assume that we have used the first one right here, which is only react with no hawks, with no redox or the old way of React and this kind of stuff. So if you have choose those desorption, then we want to ask you another question. Alright? So we have, let's say you have, you have used all the react. And now it's time for us to what we already know that if you are using react by its own, then your obligation is account a collection of components, right? So as we have it right here with this obligation that we have built, if you take Anaconda obligation, it is really a collection of different components. We have the above component, the login component, the course I teach, the course details, all these art components. And at the end of the day, these components, when we have good there together, we are going to get React application. So this component, this application using only react, was built with a stateful component or a stateless component or both of them. So maybe you had built an obligation with oily stateful components. So all the obligate, all the components are stateful, which is a class-based components, or you have only used is stateless components. Or maybe you have made a combination or you may be, you have mix them together and you have used a stateful and stateless component. So you have use this one or this one or both of these. This is what we are going to talk about in this end. In the next few videos, we are going to show you how to test stateful or a class based component, add status or functional component. We are going to focus on both of these types, which if we put them together, we are going to get a React application. Now, regardless of the type of component that you have choosed, then you are, you need to do some setup, right? We want to go ahead and set up our application for using React or so. I mean, regardless of the type of the component, at the end of the day you have used react. Well, we wanna do, we want to set up our obligation so it's ready to be test. By the way, the tool that we are going to use called enzyme. Enzyme, it's a library or a back edge that is built by Airbnb and it's a company, Airbnb, it's a name of a company. And it's built a or they, they built enzyme for testing React application. Alright, and we can make use of it in order for us to test our obligation. Now once again, there are a lot of tools, like for example, just like React testing library. But I have choosed enzyme because I'm, first of all, it has an easy ABI and there's tangible readable. We can read even if you are a beginner, if you haven't brought any test before, then it's going to be extremely easy for you to understand them. Second of all, the enzyme library, it has a great, I mean, capabilities, right? It's not, I mean, it's easy. At the same time, it is really powerful. So it is really hard to find a tool that is easy and a powerful so enzyme. It is like so. And it's popular. So it has a lot of features that make us use enzyme. Alright, so we are going to use enzyme. Now I'm not going to open the documentation and all kind of stuff because I want you to focus with me and stick with me. Here we have a React application that once again dealt with this idea of state for UNSC status. Combine it. We have made a combination between both of these. And now let me show you how to set up enzyme on your obligation. So the steps that I'm gonna show you in this video, they are the same. You can write them down or right are. At the end of this section I'm going to attach an illustration that will explain all the steps for setting up enzyme. So here we have the obligation. First of all, I'm going to stop the process of I'm going to start the process of running the obligation by hitting Control. And see, this is the first step which is to go ahead and stop the process. Alright? You already know, maybe have it stop. What is the second step? The second step is to go ahead and install enzyme. Alright, so I'm just gonna say npm install bike. So i, or you can type in his talk. Then the name of the library which is enzyme. Alright? So we need to install enzyme as well as an enzyme adapter for React. It is just ICC adopted that it will be used for configuration. So we just need to install it and use it once, I promise you, right? So I'm just gonna say enzyme type with me. Hyphen adapter. Alright. Adopter, like so. Yeah, check I'm just checking the spelling. Hyphen react, hyphen 60. So MBM install enzyme and enzyme adapter React 16 with a, with a dash between them, between these words. And we have, we have to say there is dash saved, dash div. We are gonna do some something like this. Because we want to save these tools as a development dependency, right? Because we are going to use them only when you are developing. We are just going to write test in the development mood, the user with a final result. The final obligation that will be deployed does not need to have this test file with them because it's already tested and it's ready to be deployed after that point. But this could change if you are using a continuous integration development or it is a bit earlier to talk about these topics. It may be a bit for intermediate to senior developers, whatever for the time b, Let's install these tools. I'm going to hit enter. That will go ahead and install these two tools. What is the next step? What should I do after this will finish installing these baggages? Let me minimize it a bit. Now, once you install this, these two libraries, of course it's going to be installed with no problems. 100%, it's going to be installed. What is the next step? The next step is to go ahead and enter your source folder. Makes sure that in your source folder, right-click, choose a new file, alright, and type with me. Sit up, like so, set up, taste dot js By the way, test the t should be capital, so this js dot js. So set up test.js. File name is really, really, really important. Alright? So you have to spell it correctly. So a setup tests dirty S. I'm going to hit enter. So this is the file that was created successfully. This foil what it's gonna do. Enzyme going to look for this file to see all the configurations. That is neat. Alright, so what we are gonna do, we are going to setup enzyme for our React application. And to do so, I'm just going to import enzyme, the library from enzyme, alright. And also I'm going to import the adapter that we have an installed also from the adapter that we have installed sort enzyme adapter React 16. Make sense? So we have just import the few stuff or from the library and baggage that we have installed. Now, we are going to write only one line of code to set up all this stuff. So I'm just gonna say enzyme dot configure. I went to configure enzyme. And this is a function that will take an object as an options or as a configuration settings. And here I'm just gonna say the adapter for enzyme should be equal to new adaptor, which is that we have embodied the Capital One. And I'm going to add it, our fire it as a function like so. So I have said enzyme dot configured. I want to configure enzyme with this object right here. And I have just said the adopter, to be, by the way, adapter, it's a property. And this is the value of it should be equal to new adapter class, which is we have imported a from the enzyme adapter React 16. So this is, that's it. This is the only things that we want to do. We have done setting up our tools and now we are ready to move to create testing foils and so on. So hopefully that makes sense. Thank you, my friend, supermajority. These steps are the same for an Iraq publication regardless of the complexity of that obligation, These are the same, but when it comes to creating files, then we are going to follow different options or different paths. Thank you, my friends so much for watching. I really appreciate your time and see you in the next one. 3. 02 create our test file: Or I'm offense. And the last, in the last video, we have set up enzyme for our React application. And I have told you that. Let me show it to you. Here. We have set up a enzyme for this specific application, and I have told you that the steps that we did in the previous video can be applied to any React application that you are going to build in the future. And if there is any changes in the enzyme law library in the configuration stuff, then I'm going to update the course was then necessary changes. So keep that one in mind. So now, after we have set up the, the tools that we need, what is the next step? Well, here's the thing. Here is our diagram. And I have told you that here we are still stuck in the first type of reactor testing, which is that components tasting. Now, let us see how we are going to move forward. And when I open it up here we have another diagram says to create a test file, we have two main approaches that we can follow. I mean, we have two different ways of creating our case think files because let me just organize this whenever it yeah, we have it like so. So we have setup the tools. Now what is the next step? I want to know what should I do after I am I have installed enzyme. Well, we have two different ways of creating our testing files. We have the first one either to group all the test files in one folder. Or you can create a test file for each component separately. Let me open our structure here. If I open our components folder, you will see that each component is stored in its own folder. We have the Abbasid component, we have the course, our team, the course list. All these are folders with each component has its own folder. So what I can do, I can add another file right here that will be our test file that is related to this component. So we have the course list dot JavaScript that will be a test file for our course list. And I can do the same for all these file, for all these folders. So they can monitor will contain a CSS file for the style JavaScript file for the J ESX implementation and react and this kind of stuff. And we have a tasting file. So the folder will be three files for any component. This is the first step. The second step around which I think it's a bit more organized, it is to boot all the test files in one folder. You can keep them in a specific folder. Once again, there is no wrong or right about this. I'm going to show you both of these ways and I'm gonna give you the chance to decide which one to use. Now if you want to ask my suggestions, if you want to ask my opinion, will trust me there's no wrong Android. But in my case, I think, I think I'm gonna go with booting all them test files in a specific folder. But I'm going to show you both of this, both of these ways so you can be aware of all of these. So let's go ahead and open a new slide. If you want to create all the tests in one file and Saarinen folder, then you have to name the folder like this. This is really, really, really important because the testing library that we are going to use or that will run our taste. It's kinda look for this folder with this is specifically and it's going to fire all the files inside it as a tasting files. Alright, so this is the first way which is to create this folder. Alright? This folder right here with this specific name in your source folder. Then you are ready to create the JavaScript files inside it. And it's going to be known as a tasting file. Files. This is the first way. What is the second way around we can do it. Let me open a new slide. If you want to treat each test file and its own component. When were you have to do you have to. You can do it like this. Open your component folder. Then inside that component folder, add a file like this. You have to name the file like this. It is really, really important. Once again, these are pretty important settings that you have to do. We have the name of the component, in this case item list though THE test.js or you can name it item list, which is the name of the component first, Dorothy's spec, dot JS. One of these are, okay, okay, you can use one of them doesn't really matter, there is no good and right, but I think choosing doctest, it's gonna make more sense or it, so that's why I'm going to use dot the name of the component.js stood the Aj's. Okay. So one of these ways that I have showed you either to put them in its own folder. And you can add JavaScript files, not like, not like, for example, if you have to choose the first one this way, which way? When you organize all the files in one folder, then when you create this folder, after that, you will add a normal Java Script folder files inside. Alright, so as long as we have a folder with this name, then we can't add a normal JavaScript files inside it. And it will be now in as a Java as, as a testing files. But if you want to put each test file with its own component, then we have to name it like this. So it will be recognize it. Is it tasting files? Now it is time for us to write some. I mean, these, we want to take this theory and apply it to our application. With that being said, let's get started. So I'm gonna switch back to my code editor and I'm going to show you both of these ways once again, the first one, here I have my source folder. I'm gonna right-click choosing new folder. I'm going to name it as I showed you, underscore, underscore tests, like so, underscore, underscore, That's it. We have our folder that will hold any test file that we are going out. And now if I want to write a test, Let's say for the above with component, then here inside my test folder, I'm going to right click choose the new file. And I can call it About dot JS. And this file that we have added inside our test folder now, it will be recognized as a tasting files. So this is the first way and you can keep adding JavaScript files right here for as much as you have, uh, from these component, this is the fairest way. How well within its way, over the next year and next year, maybe you can call it how we are gonna do that here we have our components folder. This is the about component. I'm going to right-click 2Z new file. And I can call it About dot test dot js, right? So these are the two ways that you can write or implement your tasting files. You can use one of them. You are not allowed to use to both of these, that will make no sense. Alright? So you can either add a, a test file for each component, it in its own relevent component. Like for example, the test file that is relevant to the about. I'm going to put it in the About folder. This is one of the way, the second way is to place it in it, all that testfile in one folder and call it like this. So once again, I'm going to delete this foil, the above test. Third KS, because I'm gonna use their First way would, because I think it's more organized. Alright. So as you can see this instrument, this is how we can setup our tasting files. I have showed you all the possible ways and what is the best and what is the better. And now it is time for us to move forward to told about tasting in general, not in general. More specific, we're going to take a deeper look. So thank you, my friends so much for watching and see you in the next one. 4. 03 prepear our test file: Or are my friends. In the last video, we have created our test files. It is time for us to not write this. I'm just kidding. We are just going to go ahead and tolkien more once again. I am trying to clarify everything before we write good. Because once we write code, it's going to make no sense and you will feel confused. So that's why I want you to understand everything. At least one, once we get to the point where we are going to write good, then you get, you can carry on and you can, I mean, understand it or it's gonna be easier, trust me, and we will see what is going to have at the end of this section, I'm going to open anymore slide right here. So if you remember a previously, up to this point, we are talking about testing React components, stateful and the stateless. We are testing the publication that they are built with stateful component and a stateless component, or both of them together. I'm going to start with the easiest one to be fair. Let's start with the easiest one, because we will take it step by step all the way to the advanced topics. So here we have the stateless component and let me go back to this. You have to write here the stateless component. What is the benefit? What is the state of this component with what we can do with it? Stateless component are made just to display data on the screen using j's x element and they receive that data via props. How easy is that? So stateless component are just a JavaScript functions that they will, they are Pelt to display that on the screen. And they will receive that data via props. And with they will use JS x2, d sub ladies data. Well, let's talk about tasting stateless. What does that mean? Ensuring that the component display the data and it has all the JC DSX elements. That suppose two has. For example, if we open our abolished components, since it is the easiest component that we have tried here. When it come to tour, when it come to say testing this file or this file right here, how I'm gonna test it, this component, that benefit of it, it is to return this do for us, right? So I want to ensure that this div return or this component return at a for us. So here when we take a look on the code itself, you will see that we are returning good. And we want to do, and what we wanna do with testing, we want to test if it is actually returning something or not. This is the whole idea. So in this video end on, we will start writing our tests. So I'm going to test component by component start to come from the top all the way to the bottom. Alright, so let's go ahead and add in our test folder. Here we haven't created our what, our first component or first testing component. And here is a few rules that you wouldn't we want to follow. First of all, alright, what you wanna do, you want to create that test file itself, or I said this is that first step which is to create this disk file itself for the component, I mean, for that component, for example, testing then if when it come to component like so, when it comes to testing the about component, we have to create the above ab.js file, which is the test file. The second step here, I'm just going to add it to embark a three thinks. Alright, so we have to import the three things that we want to use for any testing in react. What is their stuff first or let's say like So first of all, we have to embark VET component itself. So we have to import the component itself. Second, what we want to import, we want to import React from reality shows and this makes sense or write to that file, right, because we want to use js X in that testfile. Lastly, what we want to import, we want to import something alright, from enzyme because this is our tests testing library. Alright? So once again, ladies and gentlemen, we have to first of all define or create our test file. Second of all, we have to import these y3 thinks, alright? And the last one right here, order it's not the last one. Let me type it. So I'm just going to save like so, oops, we got this weird spacing that comes up from the autocomplete. It's really annoying me forever, never. What we wanna do. We wanna define that, describe alright, function. Like so, so function. And I'm going to talk and explain what does the describe function mean. And also after that, what we want to do, we can go ahead and write as many as we want from the state test. So once again, if you follow these, I want you to take a screenshot or you can write them down and do whatever you want. These are the steps that you are going to follow in any taste file with three out, right? Trust me, it's going to make more sense at MGM. Do them right now. I'm going to do one of it one by one. We already created the file, which is Taobao ab.js. Let's go ahead and import these three things. I'm going to invert the component that I want to test, which is the up bow with component of wrong. And I need to give it the relevant, but I'm gonna go back to the component folder, to the above it. Then the about foil. So we have embodied the first one, which is the component itself. Now I want to test. Second of all, we have to import React from, React that make more sense. Now what we wanna do, we wanna import something from enzyme. Now this something, it's going to be different for each component. Alright? But in most cases what we want to import, so I'm going to import something of wrong. The library enzyme. So this thing right here that we want to import, by the way, it's a named export. So that's why I have added these killer braces were arrayed. So this thing right here most likely gonna be shallow. And I'm going to explain with the shallow mean. Shallow, it's gonna give us the ability to transfer any component from React component to a testable components so we can apply, let us say, some functions and methods from enzyme on it. We cannot do it by, if we have only the component itself, we have 2s shallow on it to make it testable, right? And we will see what does that mean in the next few videos. But for the time being, stick with me. All right, and here we have imported these three things. By the way, I'm going to explain what we can change with shallow later on for the time being, just import shallow, right? Let's go ahead and talk about this dude right here. The last one, the describe function, that describe function essentially it is like it's a function that we are using to group our test that is related to Incumbent. Alright, so let me define it so it can, it can make, make more sense. So I'm just gonna say describe why xo and dysfunction at least take two parameters. The first one is the name of the testing component, let's say a write its name, any name that you want to give, right? Integral. Usually we give it the component name. In my, in my case, I'm just gonna say about Cambodia it. This is the first parameter. The second parameter is a callback function and we are going to add all the tests inside it. Correct? So call back, I'm just gonna give it an error function. Like so. This callback will inside it we are going to write all our tests. How easy is that? So as you can see, these unzoom ended Scribe, It's maybe earbuds now confused, but it is just a rubber for all the tests that we are going to write inside our code. So these are the steps that you are going to import or we are going to use. And I have wrote them down for you. You can go ahead and use them or you can get it from the illustrations that is related to this section. You have the ability, you or you have access to these files that you can download and you can read more. I'm gonna write all these steps for you in an illustration or an inability of document one of them. And now I want you to go ahead and practice on the steps because we are going to repeat them a lot. And I think that's it. In the next video we are going to write our first test. So thank you, my friend so much for watching. See you in the next one. 5. 04 write our first test in react: Or am I friends? So in the last video, we have added the steps that we wanted to do for each component. Now we want to test. By the way, these steps will be the same, but to what we are going to do now and on, will be different depending on the complexity of the component. For example, we have the About component 50 calloc on it. The only thing that we want to really ensure from it does, does this div, this div right here is exist. I don't care about it because even we don't, we don't have anything. Alright, so that's why I think a complex tests right here doesn't make sense because the component is symbol y. I have to make my test complicated excess so that the type of case, the convexity of test will be depends on the complexity of the component itself. And since this combined is pretty straight forward, and so our test also will be very straightforward. Now here we have previously added our Describe. We have told you that describe will only work lies like a container. It has nothing to do with the test itself. It is just like a container. Alright, so now what we wanna do, we wanna go ahead and write our first test. Alright? We want to write our first test. How we are going to write test. Alright, so if you take a look on package.json, we have this script right here called test, right? We have this secrets right here called test. And once we fire this secrets, only the test right here. What is going to happen? We are going to run this by, uh, by the way, this one right here comes by default with create racked up so you don't have to create it from scratch. What it's gonna do is gonna run our tasting. Alright, it's gonna run all the tests that we have created here and our application. It's going to look for this folder and it's gonna fire all the test files inside it. Alright, so, but now with the coolest think now if I go ahead and say nb mb test. Alright, let's see what's going to happen. Let's see our error where exactly it's telling us your test suite or a sweet it is file the same file, the same term, or a test suite or testfile, doesn't make sense, doesn't make them different. So your test suite must contain at least one test. So all the CodeWriter that you have implemented previously has, has nothing to do with the These are just a that's a just steps for starting rate that test. If you want to define any test, then we have the statement, the statement or the it function. Going to go ahead and create a test for us. And this function is the same as our describe. Alright, and we are going to use it to go ahead and start tasting. So it's also take two parameters. The first one is a string that will describe what does this iterator testing. The second one is the callback function for holding our test. Make sense. So we have it and take two parameters. The first one is the name of this, what is the what, what this statement going to test here, the benefit of this detroit here or this test right here, it is to make sure this component has added. So the benefit of this at right here, I'm going to write it right here. So I'm just gonna say it should render header element or attack or J6 element, whatever. So this is a really descriptive name. So when I read it, I know what is the benefit of this iterate here. Alright, so as you can see, we've got already a bussing taste. Why is that? Because there is no test at all. And we will show you later on how to detect empty test stuff in your code, because it doesn't make sense to have a test that doesn't do anything. This is really bad and you have to ignore, I mean, you have to avoid it. All right. Now this if statement will declare test, but now we what we wanna do, we wanna ensure that this component has a duty to do so. We are going to use, just by the way, just as already defined, it has been installed with a create racked up. And if you want to ensure that if you, if you open your node module Z, let me refresh it here. Here because sometimes it's not shows all the folders, so I have to refresh it, whatever. Here we have the node modules. If you open it up. Here, we should be able to see just somewhere installed the dairy have it right here. So just as a testing library that is built by Facebook, alright, and we can use it to test some stuff in our code, right? So we are going to use just for some stuff, alright? So not fall all the stuff, but you are going to use it to do some stuff. By the way, this statement, this describe right here, it all coming from just we don't need to import it because it's already been redefined in there, create racked up short. Our obligation won't recognize these terms from just once again, describe and IT, and some other stuff will becomes from just right. So here, first of all, we have to turn the abode cone component to a testable component. And to do so here inside my, let's say here we can define in our ADA statement or you can define in your Describe, doesn't really matter. Alright? And what I'm going to do. I'm just gonna say constant. I'm gonna call it trouble. This is what we call it by convention, are right? And equal to shallow. I'm gonna show low and this shallow t, it's a function that will take at least one parameter and it is our component, right? That we want to make it testable, and in this case, our component. So let me explain that I have did I haven't created a variable called robber and the robot will be the value of shallowing our component because I wanna make this component testable. So that's why I have shallow it, right? And now here is the coolest thing. I'm going to use some of just stuff to ensure that this rubber component has a div tag. Let's go ahead and do that. So here I'm just gonna say expect. By the way, all of these are Aubrey defined and we can use them. They will do specific stuff for you. And I am expecting of Rome something to have, something when you are going to cone bear to value together, two values together. I am expecting from a value to be our value. Here we are comparing two values. Then I'm this distinct writer or this operation called assertion. I wanted, I wanted to make assertion, alright. So I am expecting of Rome robber. Alright, I want to check if the rubber, which is our component, dot find. I want to find in our component. And here I'm going to pass it in a string, that div tag, right? So I am expecting from the robber to find inside it a div tag. And after that we have to add what we call them matchers, marchers is just to use to ensure that the distinct is exist. And this gonna say dot to have link. Right here, I can pass it a number. How many devs should be exists in our rubber. And in this case, I'm just going to say one because I'm expecting that this rubber has one div inside it. So this is how you can translate to code. So once again, let, let's go back and take a recap or a review of what we have. First of all, we have added are at the statement right here. So we have said that in order for us to define or create or declare a test, what we have, we have 2s statement and it, it is just a function from just. And we can use it to declare a test. And this function takes two parameters. The first one is, what is the benefit of this test? In my case, this is optional By the way, that the things that you are gonna hide right here, you can add anything doesn't really matter. But in my case, I just want to teach you the best practices ever, right? So it should render a div tag. Then we have added a callback function that will, we will, we will write our actual test inside it. And here we have shallow our components so we can make a testable. Right? Then we have added our assertion. The assertion is just to compare two values together, we, we are expecting the rubber to include or to find inside it added a div tag. And here is the number of lives that I have added. And the two have links to find and expect. All of these are predefined and just, and we can make use of them. And also here the then, by the way, some of them will come off wrong enzyme and some of them comes from just, Alright. So I'm not going to explain, for example, to have length is a frog from gesture or the expect of Rome enzyme or this kind of stuff. I'm not going to clarify that because at the end of the day we are writing test. Alright, so if I keep explaining, guided it to confuse us. Alright, I'm going to show you how to do stuff. And later on in my document, you will see that I'm explaining all these informations in details, right? So once again, this is the idea of a checking a specific element is, exists in our component to use some of the pre-built functions, uh, from the libraries just as well as enzyme makes sense, my friends. So it is really, really symbol. Now, what is that thing right here? This assertion right here is correct. So that's why our test right here is busing. If I change it to two, which is not true, let's see what's can have it. Let me analyze it. So first of all, at a here we have the about the deque. Can you see this thing right here? Is that describe title. So that's why I have told you you have to be descriptive because once you get an error, you want to try to read it. So it is telling us that the above IT component has a problem, specifically this edge right here, because you can add as many as you want in your nor describe. If you have, for example, ten at the statement, then you can read this title at its merging, this wall right here, then the error is intact. A statement, alright, where you can match this title with your title right here is telling us, hey buddy, they expected, the expected length was two. You have expected there is two divs inside your rubber. But we received length one. There is all you want. So that's why you gotta check your code before deployed, right? So this is the benefit of testing. Now, I'm going to reset it back to be one because it is make more sense. So as you can see, these and gentleman, this is the first step for us toward of testing. We have a lot, a lot to explain in the next few videos. And I'm just going to be focused and try to make the video valuable as much as I can. So thank you, my friend so much for watching. See you in the next one. 6. 05 test advanced jsx code: Or are my friends. So in the previous video, we have introduced you to testing stuff, testing concepts, how to test a very basic component that has only one element. And we have, the only idea was for me not to test the about component just to induce, introduce you too shallow to expect to find, to have length all these functions that come from enzyme or just to introduce you to them so we can be ready to extend our knowledge. We can ready to be ready to move forward to advance stuff. And now I think this component is ready. We do not need to do anything with it, right? So we are ready to move to the next component in our tree. And it is the abode component. I'm going to open it up. And instead of returning only this div, Well, I'm gonna return, I'm going to return a complicated J S X-bar example title. We have another bar graph that says, for example, learn, test, whatever, right? And we have some spans. Alright? So we have spend that says nothing at all. So I'm just going to duplicate this one. All right, and we may have, for example, buttons that say login. This will do nothing, right? Walk in like so. And I think that's it. Let's stick with this. So we have these js X element. It's a British complicated. It is not one or two. And if I can copy this and paste it again so we can get even more complicated. So what do you can see right now on the screen? It is complicated. Js X component. When you read, when you reach to a point that you have to test a component that this ablate really complicated JS x naught, one naught to note five, maybe ten element, 20 element. These amount of numbers of items there. What we wanna do, we want to introduce you to something. But first of all, let's go ahead and follow our steps, these three steps. To create the file embody, this is tough and define the describe function. Let's go ahead and do that. So inside our test folder, I'm going to right-click choose a new file. Let's call it the blog dot js, like so. And we want to import our dude. So I'm getting both react. I'm going to import the component itself from that. But for our component to which lives inside of a block and likes, and I also need to import shallow. So I'm just gonna say shallow from enzyme that should make a ton of sense from the previous video. Now we have to define our describe. So this like so. And I am going to give it to the component name, in this case, blog component, like so. And the second parameter is our usual function that will run wherever, whenever we are going to have any test. And as you can see on the console that says, your test suites must contain at least one test. And it is coming from this fail. And I want to blog.js. We have to at least have one if statement in our test stuff. So I'm just going to add my statement or my IT function. And here the title should say it should. Alright. So it's shirt like Serb, render correctly, for example, correctly. All right corner. The I just have to spell it correctly on the mud. Gonna care about that anymore rate. And we have the huge one function, all the callback function that will go ahead and we are going to write the actual test inside it. Well, if we, let me first of all make our component testable. So I'm just gonna say communistic rubber equal too shallow and give it the component w1 to make it testable. In this case, our Blow component. What do we want to test right here? We want to ensure that the rubber component has all these j's x elements. If we are following the previous rule from the above it and we have to copy this line. If I copy it, switching back to our blog dot test and heat, if I based it back. If I go ahead and add all these stuff right here, for example, I am kicking Ford the div separately for the H1 right here separately. And for this one, for this band, for the button, if I keep adding this assertion and I want to ensure that this element that you are going to bust right here is, exists in our rubber. Then I am going to write a lot of assertions that doesn't make sense. This is bad practices. We want to avoid it because there is an easiest way. So that's why this is a bad practice because there, there is a better way of implementing stuff like that. How do I test a component that display really complicated js X? At that point in time, we are going to introduce snapshot. Snapshot testing. It is the easiest way to test a component that only responsible for displaying data on the screen. Snap shot tasting, it is the easiest way to test a component that display data on the screen. In this case, we got out of luck component that display this markup and we wanted tested. We have the component here, robber, and how we are going to test it using snapshot. The idea behind this snapshot, what is going to happen when you run your tests? The obligation, what's kinda do the combiner. Going to take a screenshot or it's Kennet, take a Coby of the component that you are doing, a snapshot on it, alright? And it will save it in a file. All right, this is the first step. After that. Whenever you make a change to that specific component, in this case the above, for example, later on, I have to decide to add more markup and you save it, it's gonna throw an error. Why is that? Because once you make a change, it's going to be different from the snapshot, from the COBIT version of your component. So it's telling you the error while telling you that hey, does not showed is different from the old component, which is the snapshot, is different from the changes that you have made either. And it will give you the, the the option either to update the snapshot and include the new changes or you can ignore the changes very, very well. So there are, this is in theory, let's go ahead and see that in practice. So I wanna make a snapshot for this rubber right here to do so, I'm just gonna say expect. Alright, we use it all the time. I'm expecting from robber dot deep, OK. All right. This is a function dot to match snap shot. That's it. So I have just said rubber dot d bug, which is a function I'm expecting from this thing to match snapshot, right? So that's it. This is only what we want to do. Now. Once you do that, once you do this thing right here, if I save it, the test will run again. Alright? And if you take a look right here, it is telling us one snapshot written. And we got to best test. If you take a look on your test folder, inside it, we have this Snapshots folder. If I open it up, we have a blog.js dotted snap. I'm gonna open it up. We can see the same markup for our blog component. How easy is that? So we have, we were able to test all these mark-up that was generated in one line using snapshot testing. Now the coolest thing right here, if I go back to our component, I am. What I'm going to, I'm going to do. Let's say I will add another, let's see. I'm going to add H4. Alright? And I'm just going to say welcome. Alright. Let's see on the console what's going to happen. It is telling us snapshot to block here. Here, here is the does not should name, which is the block companies should return render correctly. Here is telling us that there is a different. Here we have this error, this red area telling us, hey, this H1 is not included in our snapshot. Alright, so here these lines is telling us that the snapshot does not include these h one, sorry, the H4. And if you take a look, it's telling us in order for you to add these lines that you have just added in a second, you can impress you to update that snapshot. And if we take a look, we got a robust test. Most importantly, if I go back to my blog, dot js dot snap, switch. So close to the bottom of it. And we can see our H1 is added to the snapshot. Sorry, I keep saying H1, it is h4. Alright, mind steak. So as you can see, I'm gentlemen, the idea of testing a component that discipline really complicated. J6 element is, is very, very, very simple. Just to have used snapshot, snapshot, it is just going to make a copy of the component. And it's going to occur once you make a change. And compare the COBIT snapshot your changes. If it's included, then it's going to end. If it's not included, it's going to give you an error with the option of adding it to the or update the snapshot. So very, very simple, very, very basic one. So that should do the job. Hopefully that makes sense. Thank you, my friend so much for watching. See you in the next one. 7. 06 advance snapshot testing: Or I'm offense. In the previous video, we have finished our blood testing and it is time for us to move forward to advance example with the statute. We already know that in order for us to use a snapshot, then we have to deal with the component that is a really complicated js X. And in this video are getting group that a bit. So let me close some of these folders. If you take a look on our components folder, we have test data about component. We have test Tableau component. It is time for us to test. Then Course Details components. So I'm gonna open it up. If you take a look on this component, we are, we have a lot of stuff. First of all, we are displaying a really complicated js X. Second of all, we are receiving a prompts. This is no good folks. And this is something different from what we have previously an order for us to demonstrate that we have to write a test for it and see what is the error. And I'm going to show you that the CO2 test i component that will receive a props. So in my this fall dot, I'm going to right click New File. Let's call it course details. Alright. So of course details though, g is, and here I have to import my three friends. So I'm getting both react. I'm getting bored the component itself. So course details. Alright, uh, from that bath which I have to go first of all one instead, doc components folder course details, the inmate course, crystal clear. Now I also have to embark a shallow from enzyme. So that makes sense, of course, up to this point because we have used a lot. So I'm just gonna say enzyme. Now we have to define our described. I'm gonna give it to that title to be cores details. Alright, so of course, details component or let's leave it like so. And here we our callback function for handling all the test for us. First of all, I'm going to define my statement. Oops, the auto complete really, really upsetting me, whatever. Here, the FDA statement I'm just going to say it should render correctly. So now the benefit of this test right here, it is to ensure that this component, that course detail should render correctly with no errors. This is done mod cup. This is the structure. Now let's go ahead and create our rubber or transferred this component from a normal component into a testable component. So I'm just gonna say Cohen instant rubber. Alright, so unlike so equal to shallow and we will shallow worked our course details, you guessed it. Now I'm going to use the same Al Gore to them previously that we have did for making this said Robert component and try to make a snapshot for it. I'm just gonna say expect pair, robber, dot, debug. Though, too much snapshot, like So. Once we do that, we should be able to generate a snapshot for this course details. I have said we should be able not, We have made it. Alright? So if you take a look on the console, it says cannot read property Bertram Abrahms of undefined. What is going on really right here. If you take on the course details, it display this information, all this title description, and Bryce, wherever we are displaying this information and we are getting these informations from this information from this course right here. And this course was it created a fair, we are trying to find a course in our, in our course's array. We are finding an array, an item that the idea of it won't match. One of the ideas in our, our, our array right here. But here we are getting the ID from this course. Id was defined to be found in the match dot params that ID. So this value, we are using React router right here. And in order for us to get this match doc parameter, that ID, we have to be in the web browser because this value is right here will be a read of Rome and the web browser right in the URL, in the search bar, we are going to find Match dot params dot id. But since here we are in the code editor, then we are no longer how we are not. We don't have access to the URL in the search bar. So that's why it's telling us hear Brahms is undefined. Once you, once you reach to a situation like this where you're combining receiver probes and this approach is not available in your code editor. Then what we wanna do, we want to try something called mocking. Mocking. Essentially it is like faking data or clone data. Now, when is the time to create mocking? Which time I mean, well, when should I create mocking? The, when I should make a decision that I have to use mocking or not. When you reach to a situation that your test is not working and it, it miss is missing data, that that data will complete the test. In this case, if we have the params and the idea we are going to complete the test. And that point we have to create mocking because we are going to take that data in order for us to complete our test. Now what is the data that we have to fake or do we have to mock? The props is we can destructure, Match dot params dot id. We don't care about the props we are carrying, We are wearing or we, we, we do need the match dot params dot id of we do have access to these. Then our code will work just fine because these e3 will make the course id and the course id will find us the course. And it's going to be the supply, all these data. So let's go ahead and let me show you how to create this mocking. So here it below B before your rubber, you can define an object, call it match, and this name really matter. You have your name, your variable name right here, should match exactly what, what you can see right here. So much it's an object, has a property called params and Brahms also an object. You can see this nesting. We can see Match dot params and this is them. How we can access properties of an object. And here we have to say it's an object. Alright? And it has the Brahms. And also this params, it's an object. Alright? And we can see it has an ID property. So I'm just gonna say ID and give it any number from one to five. Because if we open our array right here, it has only five items. Alright? So that's why we have a range of from one to five. So we can give it a valid ID course so we can make it. So this is a fake ID that will be used to determine that course right here in our course details. So it can be used to display the, all this information. So now for our course details, we can give it our much equal to match our object that we have created right here in a second. And this way we are going to fake our component. We are going to fake our component and x cannot complete the test. Aroma friends. So it's really, really odd idea is really simple. It's just to go ahead and see which data is received at, uh, probes. And it's needed to complete the test and market. Very, very, very simple. Now we can see I have a typo, I think let me see where is telling us dot match. Okay, I have a typo. Let me show you that. Here. I'm seeing dot to match snap. I have to add the P. I am missing the P, right? And now we can take a look at should work. So we can see when a snapshot written. And if we take a look on our snapshot folder, I'm going out with the top. We can see our course details. And here we have all the necessary markup. Crystal-clear, very, very, very good. However, this create the snapshot. Now if I go back to my course details and let me, for example, modify it, we have this paragraph right here that it displaying the students of the course. I'm going to remove the enrolled, right? I'm going to remove the deleted. Let's see what's going to happen. Have update my component. It should throw an error right here. And indeed it's telling us snapshot name, course details should render correctly. You have an error. And it's telling us, hey, they're enrolled right here was exist, Bettina or Lisa duties is exist. Alright, so now here, if I, if I am satisfied with this change that I have made, I count a brass you to update the snapshot and my terminal and everything should be crystal clear. So if you take, if you go back to your snapshot, you will see here on the bottom only c2, this is student is exist. But if I go back to my component and get my enrolled back, first of all, we'll notify, we will see an error right here is telling us that you have added the word enrolled back. And I'm just going to say you to update my snapshot. And if I go back to my snapshot right here, we can see the enrolled God pack. This is the whole idea of testing snapshot with a component that first of all, the sublime, complicated js X structure. Second, apple that receive a prompts, this is not done in the next video. We are going to convey this idea more by taking another example. So thank you my friends so much for watching. Really happy to be with you and see you in the next one. 8. 07 more about advance snapshot: Or I'm afraid so it is time for us to convey the idea of testing, reacting bone-in that display complicated J6, as well as receiving approx. So in the last video, we have tested our course details component and was really straightforward. We have just MLK, The manage dot params ID, ID. And then to us really, really straight forward, it is time for us to move in. The network components is three. We have this data about component of load component to their course details. It is time for us to go ahead and test our course item component. So let me open tao1 up. Let's see what Scott, it's got really good thing down when a show you its disciplinary good amount of J6. That's cool. And we are, we are here receiving up prompts. We are receiving our course as a prompts. And this course right here that you can see, it will be passed off from our course list. So if we open our core sludge like so he, let me, yeah, here we are mobbing through our array and you are returning a course, our team, and we are sending this course as a props. So that's why here inside our course item, we are receiving that prompts and display tried here. And if you are rendering Gucci array that we are mapping, it is the same array right here. It is. Our courses. Note JSON array. So we want to test our course. It lets go ahead and start, do so. And your thirst folder right-click choose any file, the same steps, course IT, Node.js. And in this one we have to import React. We have to import our duty, which will be the component itself. So of course I can. And we have to give it their pathways again, one step back, our components folder, our course, IT, then that course I came JS. Now we have to import shallow as we did several times. So shadow from enzyme. And here lastly, we have to define our describe function. So describe, and here I'm just gonna say course I2, alright? And here we have to give it the second parameter, which will be our function. And let's start adding our testing. So I'm going to add it. It should render correctly, like so. And now what we wanna do, we wanna give it the function that will run the test itself right here. So first of all, I'm going to transfer this combine to a, to a testable component. So let's say constant robber, I'm just gonna call it travel. And we can use Shadow to give it our component does should be testable. And what is the component jet should be testable. Our course, IT crystal clear. Now what we wanna do, we wanna go ahead and say, expect. I'm going to use snapshot again. I am expect on Roberto debug. To match. So to match the snap shot, like so, give it a save that should go ahead and give us an error. Pretty, pretty straightforward. So let's give it a second-year. Indeed, it's telling us, hey, body cannot read Robert T course image of undefined. What is this thing that it is undefined? It is, let me open it up. It is our course item-item is discourse right here. Taste does not have the ability to access the props of a component. So that's why we need to mark it in order for us to finish that test. What is the theme that we want to mock? Very, very symbol we wanna mark one course of from our array Jason Right here on a mock. Anyone of these to our course item right here. So it can know which item here was rendered, right? It is just a fake data. We can give it any one. Then it will take it as assemble, then it will apply to the rest of these duties. Make sense. So we have to go head and here inside our course details, I'm going to define what is the name of the probs it is course. So you have to name it exactly as we have tried here. So I'm just gonna say corps equal to dynamic value. And this dynamic value will be an object. Which object? It will be one of these items right here, because I am displaying these same items right here on our course item. So that's why we want to make one of them. However, you can just walk only then the properties means you don't have, you don't need to add these values are right. For example, we have ID, we have title, all the stuff, we have to write them down. So ID, and I'm just gonna set it to one. For example, we can see title, we have typed run, I'm just going to leave it empty. Scription empty. We have author empty as well. I'm going to leave most of them and keep, alright, we have price. What else we have? Let me just go ahead and copy because I don't want to waste your time. So we have categories which will be an array. Keep that one in mind. So I categories it's an array. Even if it's an empty array, doesn't make sense. It doesn't make difference. So we have students. I'm going to copy it and I'm gonna leave it empty. We have as hot. Alright, and also I'm going to leave it empty. This one should be a Boolean, I believe so. Yeah, the Boolean should be, for example, say false. And here we have is published, sorry, the bubble is date. Alright? And we have also what else we have? We have the course image, so this one should be empty. And at the end of the one which will be the course in which like so. And I'm just going to leave it empty as well. Once we do that, once we did this system, which is to give it this, this thing right here. Once we create our course Item and Bassett our course as an object. Once we do that, what we can see, we can see we got here, it is telling us this. Let me just go ahead and. Save it once again, alright, so we can make sure that we got our, our testing works. But if you take a look right here, if you open the snapshot folder already, we can see our course item is right here. However, if I open it up, we can see all these markups been added. But the problem right here is there is no data inside them. For example, we can see the bar is emptied, everything is empty because we didn't specify any information right here. And in order for us to, we can go ahead and add in any information, for example, hearsay Android development. So we can see something goes there. Alright, for example, learn Android is going to say that author is my name of course. And also here we have the price. Let me check the price for a second. If it I think it's a number. Just the prize was a number. So I thought that here we can give it a number like 20, maybe the CO2 categories that give it an empty strings right here. Alright? And you have the number of students. Let me check also the toy. The students also a number. So I'm just going to copy it out. So here I'm going to base it back. We have thought that the date we can give it any date like 242020, alright? Or any date really does it really matter? We have course image, we can leave it empty. Ones as you can see that the snapshot is there and we got all these updated stuff, cause we have updated our course item right here. However, if i what I'm going to do, I'm going to delete it a course item snapshot tell was because I have updated their right here, the details and a should go ahead and generate new snapshot for us. Right now we'll take a seconds, give it a second. And as you can see it and use snapshot was written with no errors and everything. If I open it up, we can see a real data that shows right here. Now if I go most embolic, Most important thing if I open my course item and I, for example, delete or remove any stub right here. Let's say, for example, anything really doesn't really matter. For example, I remove, for example, this boy right here, or I remove anything right here, or add to the Bryce distinct right here, these three edges. And if we save it, that will run the test. And it's kinda tell us, Hey, you have ADD three H's below this 20, which is the price. So and I can update my snapshot and so on. But I'm just going to remove these threes because I don't need them anymore. It was just a matter of convenient idea and explain how to taste a component that this white complicated J insects as well as its receive our probes. So I'll scan citizen tomorrow and I am pretty sure I almost sure that you have you get a familiarity with dealing with these types of tests. We should make a lot of sense. You just have to MOOC or fake data with anything and it should work as expected. Now, we did a lot of job. We have make four components, we have tests for components. Now in the next video, I'm going to take our course list. Okay, it has some good stuff, alright? And I'm going to explain it. All right? But the thing right here, let me open the course forum and we see, okay, now in this video, have justice, our course item that should make a lot of sense. And yes, thank you guys so much for routing. And see you in the next line. 9. 08 test react router components: Or am I friends? So in this video, are going to test another types of React component and we will deal with different situation. But here we are not going to test our course list component. We are going to break our order. You know why? Because if you open your course list, you will see it's not a stateless component, it's not a functional component, it's a class based component. And this is, these types of components are a bit hard for us to test. So that's why we have a separate section and in the next few videos later on are going to test these types. But now I want to finish all types of status components. We have. We have deal with oily component that will display data. We have deal with component that will receive a props. We have dm also with component that we'll use React router. I mean, that it depends on the URL. And now it is time for us to deal with different situation. By the way, I'm not going to test a course form if you open it, it's a very straightforward and very simple one. By the way, the handle on board and Dan, this is a very, very simple one. The handle on but is just a function and you don't need to mock it. Alright, you can mark this one and this one if you need them, right? But this one right here and is not needed to be mocked, alright? And it's very, very simple one. You can go ahead and create a snapshot for it. The filter is an array. The input searches is drink, feel free to go ahead and test it if you would, like, as a challenge. Because I don't want to waste our time, keep repeating this stuff. The input is a very simple one as well. The jobs, it is an empty, I believe, yes, it's an empty one. The login, the sign of the navbar. All these are very, very simple components that we have learned how to test them. And you can, you can take them as a challenge. What really attract me right here is the app.js, the objects right here. Let me remove the console.log. It's really bad idea to have them right here wherever. The idea of testing components that use React router. For example. Here if you take a look, we have derived component and inside it we have the course list. So we have a children components, nested component, as we call them. We want to go and then the right test for this one right here, it's really different from others. So here in my test for the right-click, choose a new file. I'm just going to call it ab.js. Alright? And now we will go ahead and just invert our stuff. So I'm going to import React, and we're going to import the component itself. So import up a frog. And the file was located in in my components folder, I believe. Yeah. My components. And I'm just going to embark shallow. We are not going to use shallow by the weight and I'm going to explain that in a second, but let me import it first so you, you know exactly what I'm doing. And here I'm just going to define my describe. This is going to call it up. And here we have our normal callback function. And here we should have our empty statement. Alright, so now I'm just going to say it should render them. And let's say let me check our up first. If there are if there are Tricare is slash home, then or if that Beth is slash home, then I went to render our course list. So it should render course list. If the bus is equal to slash home. This is how our case should look like. And here I'm just going to pass my call back once again. And now we are going to implement our testing stuff. Pretty, pretty straightforward. So first off, I'm gonna make our component testable. So I'm just gonna say constant robber equal to shallow. And I'm just gonna give it the up component straight the like. So and now what we wanna do, we, how we are going to check if that Beth is equal to this, then I am expecting to render the course list. Hello, this is really going to happen. We have a lot of stuff, By the way. First of all, in order for us to access their bathtub robot tip, I want to check for the DevOps rubber t. If this one is exist, then Discourse list should be rendered in order for me to access the bath. Right here. I cannot do this kind of stuff. We have to use another tool and we have to import the memory router from React router dot. So this is a special component from React router dawn called the non-married router. And this the memory router has the ability to say, to guess the path property on React Router. And you are going to use it to wrap our app. So I'm gonna drop in a new line like so we have to wrap our app.js. So I'm gonna say mommy router, like so we have to use it in order for us to wrap our app component or the first to use our memory router. And once again, I am using the memory router only because it has the ability to guess that bath was loaded, right? And in order for us to give it that buck here as an attribute, we can say initial entries equal to a dynamic value. And this should be like So here and I'm just gonna guess the home. So this is how we can best that Beth, to our memory Rutter like so. So if the bath is slash home on our robber, what we wanna do. Well, here I'm just going to, in order for us to, by the way, you are trying to test our course list. So I'm just going to import it also since we are going to use it right here. So import course list from the bath for it should be right here. Course, let's slash course list. So I'm going to do, I'm going to check if the rubber, when their birth is slash home, then the rubber should contain one course list component. So this is exactly what I'm going to write. I'm just gonna say expect. Alright, rubber dot find. We want to find what and course list like. So we have to type it like this without any greater than or smaller than or slash whatever dot to have length to help link of one, right? So this is how we can write test like this, but we are going to get an error right here. Well, up to this point, let me first of all explain what we did. Then I'm going to explain the error. Then I'm going to explain how we fix it with the up component. Here we are dealing with different type of React component, yarn. It's a functional component, but first of all, it's not receive a prompts. Second of all, it's not displaying Gij's x. It is all about React router. And in order for us to taste React router components, first of all, we have to access the bath. We want to guess which one is that bath, and then we have to load them the correct component. So here in order for us to access the bath, we have to use the moment erotica component of ROM React router dot. And we can sit there but using this initial entries. And we can Bassett like so. Now after he passed our bath, what we wanna do the shallow right here, if we take a look, we got an error. We, I'm, of course we are expecting the robber should there but is distinct right here. We should find one course list on our rubber, but this is not we, we are receiving right here, 0. Why is that? Here? In our app component, we can see the course list is a child for our app right here. So the course list was rendered in our app.js. So it's a child for it. And with shallow, shallow is not able to make a clone or it's not going to be able to take, let's say a scan or a clone for that children component in the, in the, in the component that you are trying to shallow. So when you are going to make a shallow for your app, are right, then the course list won't be visible, right? It does not have the ability to go deeper and deeper, correct? This is the problem. It's not a problem, right? Just because a shallow not has the ability to, to, to do so it's not a problem. Alright? Because shallow wasn't built for deep scan. To do so we have to import node shallow, we have to import mount. Now it is the same as shallow, the same benefit, but with advanced features, with deeper features like accessing the children, do more stuff. And here I'm just gonna replace shallow with Mt. And that should pick sub problem. Can you imagine? Now if I open, we can see we got a taste that is passing. How cool is that? If I change this number to two, we should be able to get an error because we have only one course list. And indeed the expected length was two and we received one. So let's consider a pendulum and you can repeat this statement for all the baths, for example, here, I'm just gonna let say Coby it, based it right here. And here I'm just going to change it to let see what, what, what other, but if the, if that, if that path is this lush about, then I should be able to see the About some Again, I'm just going to change this to be about. And here should be also about. And here I'm just going to say about it, which is the about component. And it's all imported already her on the on the top. If you take a look, took him are getting test that it's failed to tests that are they are felling. Because now, here we should say one by one, this is the expected result. There is one up, one about component, if they are L is this. And we should be able to see one course list. Or if the bath is this slash distinct right here. However, if we take a look, we got a problem that's telling us that. Ok, I think I haven't saved it, so let me just save when you get an error that you do not know where it's coming from, just save and the test will rewrite again. I have this refresher that will keep run that test whenever I made, made any change, whatever it, you can see it's in general and this is how you can make testing on React Router components towards really simple just you have to guess the above and load the correct component. So as against citizens element, this is really, really good. And it is time for us to talk about how we can improve them, test readability, how we can follow the best practices and so on. That's what we are going to discuss in the next video. Thank you, my friend so much for watching and see you in the next one. 10. 09 test the navbar and some best practies: Around my friends satisfying for us to go ahead and talk more about best practices and how we can really create some clean test for any component that we will do. And also we are going to talk about very important function called before each. So with that being said, let's get started now, let's go ahead and apply what I'm going to explain on a very basic component because of we have applied it on is something that is not really you don't, you are not familiar with. Maybe it's going to be a bit confused for you to understand, but I'm going to apply the best practices or in a simple example and you can extend it on a larger abroad. So let's go ahead and let's open for example, either the login or the navbar. One of them doesn't really matter as long as it's a component that render js X. Now what I'd like to do right here, it is to go ahead and it created this file, for example, for the navbar, feel free to go ahead and really a blight on any other component that you want. So I'm gonna create my disk file. I'm going to call it nav bar ab.js. And here we can treat both reacts school. I'm gonna import three-act and also we need to import the component itself. So now bar, so once again, I'm not going to explain all of these because this is really a matter of just write it several times and you will get used to it. And it was again, I'm gonna use shallow, alright, from enzyme. So, enzyme like so. And now I'm going to define my describe like so. And I'm just gonna call it navbar. Alright, and here we have our callback function. Any sit inside this function, we can define our statement as we add edit. And I'm just gonna say it should. Let's see that the component structure festival, okay, I'm gonna see it should render a logo and it should render buttons or UL or whatever anyone. I'm just going to see soon. It should run their logo. And here I can add my, by the way, I'm not gonna do snapshot testing here. Alright, if you are, if you think that I'm gonna do snapshot testing, then it is not my goal. My goal is something different. All right, so here what we can do, I can go ahead and first fair stuff and make my component. It is double as we have did a lot, equal to shallow. And we will shallow our Navbar component. This is the first step, the second distributed to go ahead and say expect from rubber dot find. We are expecting that we are going to find an H2. Let me check it out. Yes, H2, H1, H2 should be exist to help link like so to have length. And the length should be one. If we go ahead and say MB and test for running the test, I have just stopped it for similar reasons, whatever. And here we should be able to get busing tests. And indeed we can see we have good test is passing. If I change it to two, we should be able to see an error. So just want to make sure that both of these are working. And indeed we got it works. Now let's go ahead and add another statement. So I'm just going to copy it. Alright, and i'm gonna base it back. And here I am expecting that there are, let's, for example, an aftershock are it should run there enough. So here it should render and nav. And I am expecting that there is a nav tag and this one should be equal to one. And this should give me a buzzing test. And indeed we got, our test is passing. The problems right here is that we have some repetition. You can see that we are creating the robber twice in different active statement. This is not ideal, this is not a good practice. We want to avoid the repetition as much as we can, right? So let me show you how we are going to do that. Here we are doing to test a right. And we are creating a robber. And then in each one, alright? But what is the good news right here? There is a function that called before each, alright? And we can use it and it's kinda run before each statement. Make sense. So there's a function called before each, and the tool will be called before, before each statement that we have. And we can use it to set some configuration, some general or high level settings. In this case, I can initialize my rubber in the before each function and it will be used in all statement. So this is a good practice to do. So we can define it here on the top. I'm just going to say before each, like so. And this function takes a callback function as a parameter. So another function inside it, I'm just going to bass an error function. And now here we can initialize our robber. So if I cut it off from here or COBIT, let's call it first and based it. Now that the problem or the bad news right here is that the before each will run before all the test. Alright? And the robber, right here it is. It's been scoped to this function right here. So I can only use it in the beforeEach function right here in this function. So this is because of the scope. This variable is not visible outside of this function. Alright, so that y, what we wanna do, we want to first of all make it visible to the entire file. I want to use it in the entire file. So I'm going to define it first with let not want with constant. We can notice constant because I am going to define it first. And in my beforeEach function, I am going to update the value of it. Alright? And here I can remove it from here, and remove it from here. Once again, let me mix of linear everything in a second. Here we are defining a robber. Alright? So we are defining it in the high-level file scope, so it can be used in this function and all other functions. When we this before each its normal function that will get called before each, before this one and before this one, before each test that you have right here. So that before it will go ahead and run before the test, and it's going to update the value of rubber with the needed value and it's will be used is inside our head statements. So how cool is that? Now we have used or introduce you to more, let's say clean code are right. And I think this is really stuff that make a lot of sense from, for example, even if I haven't explained this in the previous video, because we want to take a step-by-step. We want to, we want to show you how to write but test, then we can go ahead and talk about good tests. So as you can see that this Angelman, up to this point, we have seen so much examples about stateless component. How to test component that display complicated J6. How to test a component that receive a prompts. How to test React router, what is the good and bad stuff right here? So we are doing at, I think, and I think these are the, all the examples that you are going to do with stateless component, alright, that only have some specific goals. Now, that is not maybe I haven't explained all the examples that exist in the world with the reactor stateless component. But I taste, I think the most common, the most usable user, I mean the most used examples. However, in the next video we are going to talk about code coverage and how we can see if our code or our test is doing something are not. So in the next video we are going to talk about that. Thank you, my friend so much for watching and see you in the next one. 11. 10 intro to test stateful component: Or am I friends talk to this point, we have learned quite a bit of information about testing and state that's components. So if we switch back to our diagram and let me show you, we have showed you that ten or Fernanda for us to go ahead and test a React application. We have first of all to know what is the tools that we used to build this application. Things like, did we use reactant Redux or we have used only Redux or, sorry, only react or react hawks. And you have showed you a few HIV used React or leave, then you have a stateless and stateful component. And we have showed you how to test stateless component. We have a lot of examples. We have to come on at that receivable prompts can warn that this ablate complicated J6 and lamentation and have showed you how you can test React Router and also have showed you hungered can use snapshot tasting. It is time for us in order for us to complete them react testing, at least for the first part of the three pieces right here. And we have to know how to test stateful component. Now usually stateful component, let me open that diagram. Stateful component are built with the ability to display data and do some extra things like modified the data they are displaying and get data from another resource like an ABR or database or stuff like that. And also they have doubled our to work with Forums and extra stuff, right? So stateful component are, and they have the ability to manage data and they can do a lot of stuff. Well, how do I test stateful component? What is the opinion that I need to test? Because there are a lot of opinions that are a lot of stuff about stateful component which should I test and what is should I avoid tasting? I'm just going to clarify some of these stuff. So what is this stuff that you have to test methods that you built yourself, right cell we have showed you previously how is stateful handle, for example, an aim bullet handle sorting can do a lot of stuff. Alright, I, I don't remember all the stuff that you did. But generally, the methods that you have to be curated by doing methods are functions, right? And also you can't get that state. State values are right where we already know that we have a state that we can use a statin then React application and we can test it as well using the test with enzyme or any other library. And also we can use DSX that this, this component discipline or ISO. These are like him. The most commonly stuff that you need to test in any React application that you want to paste. However, what is this stuff that you should not test in a stateful component? Now by the way, this stuff that I'm gonna show you, maybe not all developed bars will agree on. But I think these are the stuff that you really need to avoid, or at least you can avoid testing. First of all, life's life cycle hooks. By the way, life cycle hooks are component did mount and the rest of that life cycle functions or methods, API calls, or the stuff that you are going to get the data from the Internet. By the way, later on when it come to tasting ABI and I'm going to talk about very important tool, or we can call them lintels. And we will see the bad practices and what is desktop that we did. By the way, you have that some bad practices in the previous sections. And when it come to the next, in the next section, we are going to talk about best practices and how you, how you can write a clean react quote. But that will be for later and also are going to discuss about ABI and these kind of stuff. Some other things that we aren't going to discuss theta, it doesn't make sense to explain them in warts later on, when we are going to write a lot of code, then I'm going to explain the. So once again, life cycle hooks are methods, API calls, and some other stuff that we are going to discuss. So these are, I think the stuff that you need to avoid testing with the stateful component. And there are some reasons, reasons for these. For example, why you don't have to test an API calls, why do you don't have to test lifecycle methods or hooks? Well, there are a few reasons. Nothing comes without a reason. Everything has a reason in a program with so keep that in mind. But that is really early on to talk about. However, in this in this obligation now we are, we are working on, we have this most of the components like the course, our team, that course details. And all of them wore where just as TE plus component. But if you open your course list, NodeJS API state, it is a stateful component. We can go ahead and see that we have this state. We have the handle him both. We have the render method, so we have some functions. Beside them, does X and limitation there. So this is the component that we are going to focus on that you are going to test in the next few videos. By the way, stateful component tasting it is not I'm not saying it's hot. All right. I'm not saying that at all, but it has some weird stuff. It has some stuff that is really an understandable or you cannot understand them easily. But I am going to try to make it easy for you so you can apply the stuff that I'm gonna show you in the next few videos to any stateful component regardless of the implementation. So hopefully already. So if you are ready, let's get started. 12. 11 get the component state in the test: Or am I friends? Start, it's time for us to go ahead and write our tests for our course, this component. So if we open our course, this component, we can see we got a state right here. We've got the handle input and the render method. So we will start from the top. Let's go ahead and fair stuff all create the file, that test file. So any side door test folder right-click choose new file. That's called a course list dot js, like so. And here I'm going to import my React and I'm going to import that component itself. So import course list. And we have to give it that. But when he stepped back to the components, that course list and grab that cords test-like sum. And before we forget, we have to import as shallow as well because we want to make our component testable using shallow. So I'm just gonna say shallow from enzyme. And now we are ready to go ahead and define our describe like so. And in our describe I'm just going to say or give it that component neat. So without any official description and stuff like that. And here we are adding our color callback function. And here I'm going to add my first statement. So let's go ahead and say it. And here I'm just gonna say it should handle audits, should fire the handle input. Alright, which is that function right here. I'm trying to test this function, alright? Because I'm going to show how to test multiple functions, but for the time being, let's focus on what we have. So it should fire handle input method, something like this, right? You can add your own description are just dying, came with this, right to know. And now first of all, we have to get the component. So I'm just gonna say coexistent. I'm just going to call it Robert, equal to shallow. And here I'm just gonna give it the component name or that course list. Here we have my course list like so. And now what we wanna do, we wanna go ahead and before it, before doing anything. What is the benefit of the handling but the benefit of the handle and what it is to go ahead and set the values from our, from our inputs on our estate, right? So first of all, let's go ahead and see the values of the state help I can get this state author stay told component in my testfile. Very, very simple. I'm just going to say, look, robert, alright, which is the component, in this case, this function right here. Once we, I'm just going to log it Robert dot instance because the innocence function has a lot of a great, you know, I mean Nan capabilities. So let's go ahead and run that test. I'm gonna say ambient taste and a t day that what is what we are going to get. So give it a seconds, give it an hour, and indeed we have it right here. So we got our console.log, our course list arrived here. We got the props. We don't have any props. You got the context, the riffs. And also if you scroll to the bottom, we can see we got the hangman book, which is a function. We got the state, Most important thing, the state and it's an object that has the courses, the input search, the source term and the source or the, and we have as well city, state or the state. So my point here is that all that functionality really comes from the rub, rub, this innocence, right? So now if I say for example, dark theme but searched, let's see what's going to have it. So if I say dot in boot search and let me show you, I think we, what we wanna do here. We got undefined because I have to say DOD state. Alright, so I want to access the state then the input search. And you will see we will get an empty value. Here's a console.log, say nothing. But if I go back here, we see the input search by itself. It's, it's an EMT. So if I add, if I act for example, Android right here, if I am Android Dev like so, we will see a different result. We will see that value is that we have entered in a second, and indeed we have tried here. So let me just remove it and keep it empty. So my point here is that in order for us to access anything besides what can born it, our stateful component, we have to say rubber duck innocence. And did we have a really pretty much everything that we want to do? However, this is not what I wanna do. This is just an introduction for a well-run. I mean, our, our component, our testing component. What I'm going to do in the next video, we are going to test this function right here, the handle input. So if you are ready, let's go ahead and do that. 13. 12 test component functions: Around my friends. So it is time for us to go ahead and test our handle input, which is exist in our rubber. So let's go ahead and do that. But before doing so, before we do anything, if we open our course list and take a look on the function right here, the handle. And the problem is that it's received a props. So when you come to a function that receive a prompts, it's a bit, you need to see it. You need to spend some time analyzing what does that do for us? What is the benefit of this prompts and how its structure. For example, if you take a look on our event, our handling, handled him but it's going to receive the event as a barometer now. And then it's going to use it to update the state. And here we have event dot target dot name and event dot target dot value. So we have an event object, and inside that event object, we have at target object, right? And inside that target object we have a property name and Robert T value. So value property and name property. So once again, this function handling but received a prompts, What does this abroad will do? It's going to update this theat. That's it. And what is the how this, how this abroad, this abrupt is structured. Well, it's an event object. Inside it we have another object called target. And inside that object we have two properties, name and value. You have to go ahead and MOOC this exact same object so we can use it. So let's go ahead and do that. Market or you already know milking from the previous videos. So I'm just going to create a variable called mock event. You can call it whatever you want, but I think it is by convention. And here it should be an object. And inside that object we have target object. Alright? So like so the, so this stuff that right here, I am getting it from distinct right here I am analyzing and right, that is, we have an event object, okay, I did it right here, I created that. And also we have a target object. I'd also created that one right here. And in this object we have a property name and a value. And what we wanna do, and then name should be, let me turn first of all, type them so we can't, we don't get confused. So we have a name and it should equal to value. And I'm in like this and we have a value. All right, so we have a property name and a robot t value. Very, very straightforward. And what it's gonna do this function right here, the handling wood, it can exceed for each input. It's going to take the name as we have it in the state. So it's going to match the name in the state and the name in the input. And it depends on that. It's going to assign the value. So make a lot of sense. So here for the name right here, what we wanna do, we wanna go ahead and for example, let me hear if we want to test that the input search, we have to, I mean, the input search right here. If we want to test it, here we have two bus it right here as an, as an IEP. So input search. Like so. And if we want to test the sort order or the third term, we want to do the exact same thing, keep their value. I'm going to talk about it in a second. But for the name, since we, since the test right here, does not have access to the input itself. So it cannot hear that because the handle in both wet it's gonna do, it's gonna grab the, the name of from the input, this handle on, but it will be fired on the input itself. So it will have access to the name right here. But our test right here, it does not have access to the input itself. So that's why we have to pass it the name manually as what iss w, For example, for what went, I fire my function. I want to make it up value of the input search. Let's say for example, hello, just for testing purposes. Now I haven't remembered my mock event. I can go ahead and call my rubber, I mean my, my handle input which exists in our rubber. So here I can save robber dot handle edata, innocence, sorry, instance. And here I can say dots, handle input, handle input like So what I'm, what I'm typing. So let me just see that. Good. Yup. And so let me just robert dot instance dot handle in which we should be able to see handle. Unlike so input, right? And for this one it's going to take an event as I, as I, as we have it right here. And we can't give it our mock event as we wish. Now once we do that, once we do this step right here, if we go ahead and save that, and we will log the rubber dot instance dot state. I'm going to see the state that I have added right here. If I give it a safe after we have updated the state right here, we will see a good result. We can see here is the state, by the way. And let me just input, just say the input search. So I will just say input cell so we can see clearly without any shoes. So input search like this. Once we do that, we will see we got hello. That's mean that handle input was fired successfully and it said that it has updated estate with these two properties. So we got it to work correctly. So as you can see, this Angelman, This is how you can't taste handle input. Now here we can do the exact same thing. For example, if we want to update the sort order. So I'm just gonna say sorter or salt or dark has set the value to be hello. And I came back and here say sort tour. Let's see what's going to happen. We are going to see the updated value right here on our, I mean, here we have updated our sort term of Robert here on our state. So as you can see, the gentleman, it was really straightforward and it was really simple. We have just analyzed our function, which type of a props that tool or received, and how it's going to do stuff. Then we have just MOOC that prompts. And we have added right here. And we have, we have seen that this more criteria, it needs a name and a value, Robert T, and it will use them to update the properties on our state. And we have showed you how you can do that very, very easily. So as you can see, this element, this is how we can take the handle input was really, really straightforward and was really simple. And the next video I'm going to talk about testing. I mean, a function that does not receive a prompts and how we can deal with them. So I thank you, my friend so much for watching. See you in the next one. 14. 13 another example about testing component functions: Or I'm afraid so it is time for us to go ahead and talk more about testing functions inside a stateful component. So at the previous video, I showed you how you can test the handle input at, I think was really confused. I totally agree and I totally understand that because maybe it's the first time for you to do stuff like that and our tests stateful component. But trust me, it was also hard for me when when I just get started or it was really intimidating at first. But you have just to keep practicing with different examples and you will get most of the examples. You will see that it really, really simple. So it is time for us to go ahead and do something else. So now inside our cars, less component, I'm skin at a function. It's a very, very, very, very simple one. And it's gonna say, for example, is valid or whatever. So it's valid. What would this function going to do? Is it's going to go ahead and say this dot city-state, who are going to update our state. And we won't say that is valid. Is valid like x4 to be true, right? To be true. And of course, this value is not exist in our state. So we want to go ahead and added, so here inside of our state. And it's gonna say is valid to be false, right? So it's a very simple function that does not receive a prompts. I just wanna show you how to test these types of functions. Going back to our, our test right here, we already have distinct righty, let me remove the Console.log. I don't need it anymore. Well, I'm going to do now. I am just going to say rubber dot instance. We already know that. And here we have this function called is valid. And what I'm going to do now at the bottom, I'm just gonna say expect from what we wanna get our estate. So I'm just going to say rubber dot instance 30 state. We want to get this state and we have the property called is valid. We wanna check it out. So we wanna say d2 b or two equal. And it should be true because this function right here will make it true, right, that coin and see what is what we are going to get. Indeed, we got a successful test. However, if I make it false right here, oops, if I make it false, like so, let's see. We should be able to see an error or at least a failed And indeed telling us that, hey, expected false. But if you take a look the property here defined here as a false, right. And here we have called the valid function and the benefit of its valid function, it's kinda make it to true. So that's why here we receive a true. So let's consider syndrome and the idea is very, very simple. You have the function on the rubber dot N states and the name of the function and you can call it. So that should make a ton, a ton of sense. Well, you can go ahead and take it as a challenge. Try to add more stuff. You can go ahead and for example, try to test as many functions as you want. But it always keep it simple because this is what you are going to get. For example, if you open courses component, what is the benefit of it? Alright, it's either a handling, but it can have, for example, update stuff on this state. It's going to maybe do some stuff that said, it is really, really, really simple. Alright, so I highly encourage you to go ahead and take some examples as you want. And I think we are good to go. We are ready, we are. We don't have anything else to do here. We are ready to move forward. In the next video, we are going to talk about snapshot testing with course LAS Cambodia. So see you in the next one. 15. 14 snapshot testing with stateful components: Or my friends at Sanford, go ahead and talk about snapshot testing with stateful component. Finally, There is no different whether it is stateless component or a stateful component. When it come to snapshot testing, it is the same, it is absolutely the same. So in under first approved idea here, instead of doing all the stuff, I'm just gonna say expect rubber then here to match a snapshot, right? So we have just to say can match snap shot. Alright, and there should convey the idea. So, alright, we have forgotten 30 DI box or let me just go ahead and here we got snapshot one, snapshot testing. But there is this debug function that it is there for the new version of Phase I, we have to include it, right? And it will give them, give us an error because we are here. Let me do undo that, right, I'm going to show you what is the difference between the debug and debug method? If you here it's going to throw this snapshot. But if you can't see if you open it up, we got nothing. It's, it's completely empty, right? This is without the debug function that we have include right here. So this is a problem with that, with this, without adding the debug right here at all, credit snapshot, but it is empty. What is the benefit of an empty snapshot preserved? That's why we have to use the debug. By the way, I couldn't figure this out when I just want it because I have to use it without the debug function. But recently they have a baked into the enzyme and we have to either that debug like So. Once we do that, we can see we've got an arrow telling us that all of the stuff was added to the snapshot. I'm just gonna say u for updating the stuff. Because I wanna my snapshot to include all these topic. We open it up again. We can see the markup that we need for our, for our costs courses. So once again, this snapshot testing, it has nothing to do with stateful are stateless component, does it? It does, it does not care about the type of the component as long as narrative OSX inside that component, it's going to take the job. So as you can see these gentlemen, that I think that's it. This is how we can stay home component. I know I didn't it took all the examples I counted doing with ABI is how did you so because I have already told you that we are not going to test in ABIs. And later on, we are going to show you how to ensure that API will be 100% correctly, whatever. Up to this point, we have learned how to test stateful component is stateless component. It is time for us to move all the way to the React and Redux tasting. So if you already, and if you want to learn how to do that, see you in the next one. 16. 15 redux react testing: Or a mattress. So it is time for us to talk about React Redux testing. And specifically we're going to talk about testing the application in that pin pelt in React and Redux as well. So before we get started, we need to understand some diagrams and some stuff that will help us, right? So I think I have some illustration is that we'll go ahead and make at least getting the idea of testing redox a bit easier for us, right? So instead of writing the code immediately, I just want to show you a few staff that it's gonna be super helpful for us. So here we have the first part which is testing React application or the obligation bad, that built in a stateful and stateless component. I think it is done. It's almost done. We don't have anything to explain about it. We after we have learned how to test React router, we have learned how to test state for stateless component and all different kinds of stuff. It is time for us to go ahead and talk about the second beast right here, which is React and Redux together. So let me show you something. Redux is being used to deal with stuff behind the scenes, seeing things like Actually creators, reducers, stores and this kind of stuff, right? So the redox part of the application is always, is always about the stuff that kind of behind the scenes and process that data, grab data from the Internet, do this and that, right? So it's all about, I mean, doing the functionality. Let's see if we can get it correctly, if this term can make sense. How about react? React is only for rendering their view. We can get at the end of the day, we are going to get the data from the Redux store, then you are going to react. So React is almost about this blind stuff on the screen. But all the job will be done in Redux and make a lot of sense. So when I see redox testing, when I say redox test testing, what is the what is the basis of any redox application or what may CRE, what is how we can make redex, right? So it's all about actions, reducers, these kind of stuff, right? So when I say redox testing, I mean testing the actions, tasting the reducers, testing for example, asynchronous action creators and so on. So the idea here is testing small pieces. Alright, like for example, how can I test this action? How I can show? But if you take a look on the action itself, what does action mean? Action, essentially it's an object, is a JavaScript object or the reducer. It's a JavaScript function, the store, it's a JavaScript object. So these are vanilla JavaScript, let's say concepts. Alright, very fundamental stuff in JavaScript, objects, functions, and so on. So when it comes to testing this stuff, You are no testing reactor and stuff like that. You are testing a vanilla JavaScript code. So this is really important to do. There is a difference between react redox testing and redex itself because Redux isn't for reactive specifically. So when you are saying redox testing, then you are talking only about three dx without any other stuff. So we have to test a vanilla JavaScript at the end of the day because it's all about objects and functions and so on. So this is what those Maria redox testing meat. And we are not talking about redox testing in this course. So you have to be aware of this. I'm not going to show you how to test redex application. I'm going to show you how to test react redox. Alright, so this is my job right here because this is a React course. So that's why we want to show you how to test and react. And the redux obligation, not Redux code, only. By the way, if you want, I can make maybe a small video to show you how to test, for example, action and you can go from there, extend your knowledge about that may be you are going to add a video later on. I cannot promise you, but maybe at the end of this section you will have a video. Right. Now let's switch back right here. Tasting react Redux application. It is all about testing the map state two prompts. Why is that? Because Redux can process that data and grab it, for example, a from the internet or do this and that at the end of day it can process the data and then the map state to prompt. It's going to be responsible for biasing the data from the store all the way to the React publication show off. We were able to test the mob is state two probes. Then it's going to be, I mean, super helpful for us because all the job will be done inside the map state two probes. So we are going to talk about testing them at state two probes function. So as you can see, it's Angelman, this video have just introduce you to, or at least you have clarified the idea and the difference between Redux testing and react redox testing. I hope that makes sense. I know it's a bit confused maybe for you to get it because it is really it's really not a clear. Okay. Even if when I'm explaining that, it's still not clear and even its read expire itself. It has some, I think, kind of difficulty for, especially for people who haven't done any other languages or any technologies before. However, that was our video. It was just an introduction. In the next video we are going to talk about the tools that we want. We will show you the application that you are going to use as M, a playground and so on. So how far that makes sense. Thank you, my friend so much for watching and see you in the next one. 17. 16 get the component ready to test: Or I'm afraid so in the previous video, I have just introduced you to re Redux and react testing. And in this video are going to show you the final obligation that you are going to adopt, as well as the tools and setup everything that we need to do in order for us to write some tests. So before I get started, if you if you do if you didn't follow along with the previous searches or previous classes, then what you wanna do, and you didn't watch the redox sec section, then you can go ahead and download this broadening that you are going to work on from the resources for this lecture still week. Well, I'm gonna give you that the project that we are going to use to test criteria can go ahead and download it from the resources for this lecture. And he, once you download, once you download it, open it in your VS Code. And once you download that, you have to say here nerve terminal, open the terminal and just say MBM installed. So you can install all the node modules that you need to do a write, hit Enter, then you are, you'll be good to go after, you know, after we did all these steps would meet or you have did it right on your own. You'll get this obligation right here. I'll open the terminal and type EBM startx to start the server. Once you do so, you have this obligation that you have built in the redox clause or in the redox section. That was very simple, very straightforward, test some functionality and so on. Some are going to use it to test because it has some great stuff that we want to focus on. So if we go back here, we, what we wanna do, we wanna use enzyme once again for testing these stuff. So what we wanna do really right here is first of all, to start setting up all the stuff that we need. So let me start by. First of all, I'm gonna still this server. We don't need it anymore. I'm going to clear my console and I'm going to install enzyme and the enzyme adopters. So let's go ahead and say npm install. And I'm going to give it an enzyme which is the name of the library. And also we will need the enzyme adopter for react. So we can say enzyme does a doctor dash react, dash 16. This is the name of the package. And we can see it does, does saved if, right? So does does to save it as a dependent or as the development Ben DC, I'm going to hit enter that will take a second and wild, this is done a dropped. We hear inside our source folder we wanna create our setup test file here. So I'm going to right-click choose a new file, call it sit up. Like so ab.js, make sure that the name is correct. And as I have tried here, either OS, you are gonna get an error. Hit enter, and there we have it like so. Now what we wanna do, we wanna go ahead and just configure enzyme. And use that data that you have installed. By the way, this steps you already did in the previous section show if you watched the previous section, I think you don't have even to watch this video, whatever. And I'm just going to say import, we will import the enzyme, alright, so enzyme from enzyme and also the adapter you need as well. So I'm just going to say import a doctor from enzyme adapter like so. And we have to, we have just the saith enzyme that configured. We wanna configure it with the new adapter. So I'm just going to say adopted, which is the property that exist and set it to be new adapter. And we are going to first drop, I mean, get an innocence from that class. And that should be our job. That's it. We have setup enzyme. I'm going to create my test folder. So right click New Folder, underscore, underscore, test, underscore, underscore, and that's it. So we have created our first or our test folder. Now if we open our components, we can see some components right here. And we can go ahead and test anyone but with like, does it really matter, doesn't care about all of these. But I think we will start by taking a look on the course that we are going to test this course, this component, because it has, I think, what we want to focus on, which is all the other component I think that we had built. They have the microstate to props because any React application that you will build with Redux, most likely. I mean, most of the component will be connected to redox in order for us to connect component to read extend, you are gonna use the map state or the gate here we, as we call it a criteria that get courses from store. Several tests are dysfunction right here because this function will connect any rock WK And Iraq component to redex. So this is what we are gonna taste. It has all the job that we need. So feel free to choose any file and follow along with me and my case. I'm just gonna taste our course lists and so on. So here in my this fourth term, right, click choose new file. I'm just going to call it course list dot js. And we are ready to go ahead and test it. Now what we wanna do, we want to import all the stuff array. So I'm just gonna say import. We have embarked reactor of course. And we want to import here in our RAM. What we wanna do. We wanna import that component and dysfunction, right? So this is really important to do. So we want to import the component as well as the dysfunction right here. By the way, this function right here is completely separate from this component. These are two different functions. So we can export both of them and go ahead and then import them right here. So here and saw our component. I'm just gonna say export and export it as an export. And here we have also the function, I'm just gonna say export here. So that should do the job. Now in our course list component, I'm going to import something wrong. Our components, our course list is specifically what is the thing that I want to import? I want to import first of all, the course list itself, the component as well as good courses of from a store which is as you, as we used to call it MAB state two probes. So we can go ahead and rename it or keep it as it is. So here we can say get courses from store and also what we want to import, we wanna import shallow from enzyme. So that is basically it. So embark shallow from enzyme. And we are going to define our disk, right? So let me just type it correctly. So this, right. And here I'm just going to say course this, which is the name of the component. And as a second parameter, we are going to give it our function. And I think, I think that's it. We are going to end this video right now because I just want to keep all the videos short and understandable. So it's considered. Ladies and gentlemen, in this video, we have installed the tools. We have a curated our test files and folders, and we are ready to go ahead and start testing. So in the next video, we are going to analyze a few stuff and we are going to write some test. So see you in the next one. 18. 17 test the react redux component: Are my friends. In the previous video, we have set up our course list, the test file, and it's time for us to go ahead and write that test. Now, in this video, I'm going to show you something really weird, right? When it come to react redox testing. Because we have told you previously and we have understand that we want to only test this map is state two prompts, or in this case we have call it good courses from story will not only let say, go ahead and test this function because it, because it will be the main connection between react and redact serial get tested. So let me just first of all, you remove this console.log. We don't need it towards added in the previous sections whenever. Now let me write our statement. So I'm just gonna say it. And here I'm gonna say it should return the state. Alright, so should return the state, right? So this is the benefit of this function right here to the, to the component. Let's see, so we can be more specific, right? And as a second parameter, we already know that you are going to pass it any error function or a function as a call back. Now what we wanna do, we want to convert this text right here to a test, so it should return that state. So I'm gonna create a variable. I'm just gonna call it a state equal to firing up the good courses of ROM store functioning, which is this function that we haven't bought. And dysfunctional take a state as a barometer. So we want to go ahead and create this state. So I'm gonna do here on the top, I'm just gonna say constant initial state, the scholar, you should equal to our state right here. And what is the benefit of the they get courses or from store? It will take the initial state as a parameter once we fire it up. And it should, it should look inside this initial state for our courses and should it grab it for us? So let's see what is the state right here. The state right here should include course list here, which is our Reducer if you already know that. And inside discourse that we have a courses as well as the input certain properties. So we want to go ahead and mark the state. So the state has an object inside it called course list. And in this course that we have our courses as well as our input search. So here inside my initial state, I am going to have our course list. Make sure that you spell the name Richard correctly. So let me just copy it or we can spell it up. It is Courses list. So courses like so Courses list. And this one is also an object, has two properties. The first one is Courses, which is our array. In my case, I'm just gonna say one to one. Let me just add the numbers. So we can really ensure that this array will be returned for us from this array. And the second one is just an input search. And I'm just gonna set the value to an empty string. Once again, the initial state will be passed to our function right here. And if you take calico and this state right here, which we are going to pass, it has course list object and inside it we have two properties. Courses, any inbuilt search. So we have mocked that, that object that the state right here. Now we want to ensure that they get state, sorry, they get courses, a Framestore function, once we fire it up, it should return for us and object with our courses as well as the inbox search. So what we want to do now, I'm just going to fire this function with our, with our initial state. And now what we can do, we can go ahead and log the state to the console, serve ISAM MBM test. Now, that should go ahead and fire the function up and we should be able to see our state. And by the way, the state right here, if you take, I'll call it the same mistake will, that will be passed as a prompts to our course, this component. And indeed, we got our array had we got our input search from our state. Now if you are wondering, hey buddy, what the hell was that? This really a test? Is this really a logic? Now, indeed this is, this is the benefit of the good courses or from a store or we can call it maybe state to props, that it will take a state and it will look for it for the properties that we need. In this case the courses and then Bush search. So it should return them for the component. And that's it. It is really, really simple and really straight forward. This is how you can taste that good. Or map state across function. Now I know some of you guys now asking, Hey, how we can check or how we can insure that the course list will has the state as a prompts because this microstate Abrahms is gonna take the state ambassador as approach how we can ensure from that, how we can really do that. Well, there is a way I can show you the way right now or even the next video. But I think Don't Be more specific to much specific or don't focus too much on details while you are writing your tests. It is really not a good idea. You want to be general, right? So if you go ahead and ensure from every single detail in your code and your test, then it is really, really will be mass. And it is not a good idea. Because if this function returns the state, then this component can display it. So if this function one dysfunction y min was not able to get the state, then you are not. The test will not pass or we will see something different criteria. For example, if I change the name right here to something like test and save our obligation, let's see what you are going to get. Give it a second scanner. As you can see, we've got our courses. It is equal to undefined, that meaning have something wrong in our implementation. So as you can see that women don't be too much specific and focus on details that will break your test, right? Always be general. Just write the test in a way that is understandable and clean. And that's it. This is how you can do it, is a very easy don't confuse yourself too much with testing. So as against this instrument, this is how you can test our Maps Data props function. In the next video we are going to talk about a snap shot testing. So see you in the next one. 19. 18 finish the react redux testing: Around my friends were designed for us to go ahead and talk about it. Snapshot testing, right? So snapshot testing works in React testing in general, regardless of if you are using stateful are stateless or even if you are using React redox. So let's go ahead and talk about its snapshot testing in this video. So it is very, very, very simple. Now we can go ahead and define another statement. Cause it's making, it's make it clear for us. So I'm just gonna say it's an here. I'm just gonna say it should render, alright, or we can say it's should make snapshot, it should render correctly. It doesn't really matter. I don't want to waste our time. So I'm just gonna say constant rubber. Alright, so we can call it rubber-like soon should equal two. What do you think? We are going to say shallow, right? And we will follow our course component that make a ton of sense up to this point. However, if I save it like so, we should be able to get an error. Why is that? Because here's us cannot read property filtered of undefined. If we open our coarseness components, we can see our courses component will receive an array of courses as a prompt. And it will be, it will be used to display their list of items on the screen. So that's why it will be, the component will not be able to render without discourses are a, but for the input search, the input Search will be used for filtering, right? But it's not going to affect, it, is not going to make an let's say it's not going to affect our obligation directly or mainly, mainly before it surrender. Because the courses we can to be used when the component is rendered, right? So organise it immediately. But for the input search until the user search for something didn't organize it. So it can only hear bus in our course's array resonance is gonna say Courses. And we can also go ahead and mark our courses to an array of array-like zone. And we can give it, for example, in a course, right? I mean, we can give it like a title and this kind of stuff that we have used in our data dot JSON. It knows it is not really adjacent data, but whatever, we can go ahead and give it all these properties are the stuff and d. So we can make a really Mach right here. So I highly encourage you to go ahead and pass it an object right here. And you can go ahead and mark one of these objects right here at the title, the ID, this kind of stuff. But in my case, I'm just going to pass it an empty array so it can save the time. But in your case, you have to pass it an array of objects, at least one object, so it can be used as a fake data. Now once we do that, and this gets, I expect, and I'm just gonna say rubber to debug dot to match snapshots. We are going to match snap shot. Once we do that, give it a save that should run the test and give us a snapshot so we can see Match snapshot. Okay, I'm, I'm missing the Alright, here. It should be much snap shot. Note here. Come on. Yeah, right here. So sorry for this type or whatever. As you can see, it's telling us that one snapshot is written. So if I open my snapshot folder right here that was generated in a second, we can see our course list. And indeed we got it like so. And as you can see, it's telling us no items found because our array is empty. But if you had Bassett and object, alright, then it will give you that object or ids information, whatever here were. What I'd like to do. Let's go ahead and test it. For example, below the, below this div, I'm just going to add several F or zed wherever. And we can see it is telling us that, hey, you have added this stuff right here to your snapshot. I'm just gonna remove them. I just want to ensure that the snapshot is working. So as considers than dilemma and this is how you can taste react redox application. Of course, we have several examples right here. We have the course item, for example, you can go ahead and reimplement the test for your nervous state to props, right? Because we don't, we don't want to repeat ourselves a lot by testing all these components. It doesn't really worth, worth it, right? I'm just going to teach you the basics and you can go ahead and extend your knowledge about by practicing and getting errors and solved them and so on. And I think up to this point, we have learned a lot about testing. We have learned react testing, stateful, stateless React router, how to test reacts with its application and so on. I think it is time for us to go ahead and move to Hawks is so we are going to introduce hawks, how to deal with hawks and so on. So thank you, my friend so much for watching and see you in the next one.