React Testing Library Tutorial #10 - Fire Events

we are now going to do something very exciting we're going to be writing a bunch of tests that are going to test out the functionality of our application now if we go over here some of the functionality that we'll be testing is hey if i type into the input the value should change also if i type into the input and then press add i should see that to do rendered in the to-do list now if i click on that particular to do i should see these styles changed now thus far all we've really learned is how to get elements but this will require us to not only get the elements but also interact with the elements so yeah we might know how to get this input element but how do we type into it we might be able to get this add element but or this button element but how do we click it and that is exactly going to be the focus of this video how we can interact with the elements that we get so let's actually go ahead and let's just simply test this component right here so this uh this input component and this is going to be a unit test because we're only testing this component so let's go ahead and let's just get rid of all of these tests and let's just copy this test template because i don't want to copy i don't want to write this down so let's just close this out and then let's go to our add input element so over here it's a very simple ad input element over here we have set to do's and this is where all of our to do's are we get that from the parent and the parent is in here in the to-do's so you can see here that we have set to do's which is initially set as an array and we pass that to the add input element and over here we have the to do's all right so now over here we get we get the set to do's and over here we get the to do's from the parent through the props and here we have another state and this is just the to do and set to do and this is really just the uh the value of the input so over here you can see that when we change the input we're also changing the set to do and also over here i did a doubly binding where the the value is also equal to the to do state now if we go ahead and we type into it and we press the add button then we call this function the add to do function so essentially all this is doing is uh is is setting up the updated to do so it's getting all of the to do's and then it's adding this to do within it and this is an array so we're just destructuring all of the to do's in the initial array and we're adding this one and then over here we're just setting the to do's inside of of the to do component to the updated to do's and then we are setting the set to do which is the input back to empty an empty string so this is just a very simple component i do expect you to understand what's going on here and let's just go ahead and test it now what's great about this is it's more complicated than the ones that we've been doing thus far and so we're going to be doing quite a bit the tests are going to be more logical and a little bit more complex so in here let's create a underscore underscore test underscore underscore and then let's add the add input dot test dot js all right and let's just go ahead and just copy these this test in and let's just do a little bit of changing here we're testing the add input right testing that the add input component and over here add input and over here we'll just change the describe block to add input and now what we want to do is uh well we want to test this component the add input component all right so let me just uh change the describe block so what are we testing here what is the first thing that we want to test well let's actually just test that if we type something in the input the value of the input should change so that is the first thing that i want to test now first of all let's just get that input so let's just get that input so let's just say hey we're going to test that our our application renders that input so should render input element this is our test so how are we going to get that input element well we can get that input element by placeholder text and the placeholder text is going to be so if i remove the actual text it's going to be add a new task here so we can do a regular expression or a string if we want to i'm going to do a regular expression and then in here i'm going to say add a new task here and then dot dot dot and this is going to be an input element and then over here this is also going to be an input element now the component the component is obviously the add input component so let's let's just change that right now so let's go here and let's say add input and then the add input component now here is something interesting this ad input component well it takes in two props it takes in the to do's props and then it takes in the set to do is props now the to do's is very easy that's just going to be an array so what we can do is very easily say that hey the to do's we'll just say is an array so is an array now over here now we have the set to do's prop which is a hook so over here if we go back to set to do's you can see that this is a function that is going to change the array now in here we're just testing the add input and we really don't care about what happens in this component we really don't care this is not an integration test we're only testing this component so we really don't care what this function does what this set to do function does so what we can do is set to do's and we can just set this to an empty object and that is completely valid but a better approach is to just mock this object so we can do that by doing const mocked set to do which is just a object and we can say jest which is the testing library that we're using on top or on top of react testing library or we're using react testing library on top of jest but we're ultimately using jest and then we can just say just dot function and this is just going to be a mock function that does nothing really but we can use this function over here as the thing that we pass into set to do's okay so now if we go ahead and we save this should pass and it does pass all right cool so that is the first thing and now let's start interacting with it so when i start typing things i should see the value change so let's write a test for this let's just copy the the test block and then let's paste that in there and let's just change the change the description so i'm going to say should be able to type into input so for this test we should test that we are able to type into this input and the value of this input changes accordingly now over here of course we rendered our component which is good then we got our element but now what we want to do is to fire an event we want to trigger an event and especially we want to trigger in this case the type event now how do we do that well we do that through the fire event function that we get from at react testing library so what we can do here now is say below the input element that we have gotten we can do fire event and then we can do fire event dot and then over here you can see all of the events that we can call so over here we can have a change event a click event a blur event you might have a copy event a cut event a drag event and again i'm not going to cover every single one i'm just going to cover the most common ones and then later on you can use the other ones as need to be but you can see there's so many events mouse over mouse leave pace events play events so you can really test anything it is that you want but what we want to do is we want a type event now there is no type event here so instead what we're going to use is the change event because what we want to do is we want to change the value of that input so now what we can do is say change and then over here you can see that this is going to expect two parameters the first parameter is the input element that we want to change so whatever the element it is that we want to fire this change event with well that is going to be the input element that we have found in line 25 and then the second is the second parameter is going to be what we are going to change by so this is just a bunch of options so we're going to say that we want to change the we want to change the target and then we want to change the target value to and then let's just say go grocery shopping so go grocery shopping so once we trigger this event so once we trigger this event over here what we can assert is that the input element dot value is going to be go grocery shopping so now if i were to save this this should pass and it does i hope let's see and it does awesome all right so now let's start looking at some other things that we can test so we tested that we should be able to type into it now let's test that once we click this button so once we click this button so once we type and then click this button the value of the input element goes back to nothing okay so now what we can do is just go ahead and copy this and let's give this a name of should have empty input when add button is clicked and i believe i misspelled button here and i didn't yeah i actually did yes button so okay so now what we have to do is we have to of course render our component we have to get the input element we have to well trigger a change and now what we have to do is get the add button so how are we going to get this well let's get this by roll so we're going to get it by the button roll so over here what we can do is we can also construct button element and this is going to be screen dot get by roll and we can say button because we only have one button but we can also specify the text inside it by saying name and then we'll just say add in regular expressions and so like this all right cool so this should get the add a button and now what we can do is we can fire an event so we can say okay after the change event let's just go ahead and let's fire a click event and then in here we're just going to pass the element that we want to click that is the button element and then once we click it we're going to assert that the input value is empty so now we can save this and that's it we're done that's that's absolutely correct and that works so that is how we can actually trigger events using react testing library now in the next section we're going to be working with more trigger events tests but now we're going to be doing more of integration tests

Channel: The Net Ninja

Views: 46,277

Keywords: react testing library, react testing, react testing tutorial, react testing crash course, tutorial, crash course, react testing library tutorial, how to test react, unit testing, test, testing, react tests, RTL

Id: 0Y11K7KSC80

Length: 13min 24sec (804 seconds)

Published: Tue Jul 13 2021