Testing React Hooks

hello everybody and welcome back to my channel great to have you back around these parts I missed you hopefully you've missed me as well this week we'll be delving back into the land of react and hooks I've had a few videos about react hooks in the past and this video I'm trying to fill a hole in some of my content and this week I'm going to talk with you about testing react hooks never talked about it before I just assumed that your code was perfect and in need of no help from tests but alas some people have reached out to me and said hey I need some help running some tests with hooks so this is what this video is hopefully going to show you the short version of how to test with hooks react hooks is that you just test your react components as you normally would that's kind of a short version of this video but I'll delve into a little bit more detail to actually give you a little walkthrough but what it looks like to actually test a component that is using react hooks right now let's start okay so let me give you a little tour of what I've already written just to kind of accelerate these videos I made here a very basic component called my component because it's my component not your component so it's your component I guess it would be called your component and it's using two of the most fundamental hooks use States and use effect so I'm using you state to track the count a very unoriginal example sembly and here is the content of the component itself where I'm rendering the content and then if you click on the button to increment the count and if you're a Sesame Street then that's the account that will be implementing the crumped you're clicking here to increase the count here and what I'm doing on here is I'm having a use effect such that when ever this componentry renders I want to give the callback or call let any parent know that something changed inside very simple straightforward component just to have you there for example purposes I have a basic outline of a test component I mean maybe using just as my test Runner an assertion library and enzyme as my react utility for rendering the react components so if I start up just here start running it runs my tests and thankfully it works yes Edition and JavaScript is thankfully correct but I don't know something I want to do now first thing want to do here is make a little before each block that's kind of how I like to structure my tests having the same thing run before each assertion now I'm gonna have a wrapper which is gonna be my little bit wrapper equals mount my Corona and then also what I hear is a mock function for my on count change callback so on count change I'm a call just function to help make a mock function and then I'm gonna grab this we're gonna just a Const and put this in this a prop and then we're going to say is that it renders so when I say expect wrapper not to be know all that run the test and things were passing so if I were to actually long this using rapper debug enzymes utility method for kind of seeing what's actually being rendered should see here at my nice little tree and here I have it so things are working we're on the right path let's keep going first thing I want to do is and again this is me just rendering a react component but I want to actually start seeing that when I call the button my use state hook is correctly updating so first thing I want to do is say that by default shows my default text so if I say wrap or dot now it is going to be P tag so I say find P I get the text I'm gonna say to equal this is going to be counts 0 see if that's cool so that's working and now it shows it correctly increments the count by 1 again the counter here so on and get this button so I'm going to get the wrapper find button I'm going to simulate a click event and this then changed to 1 because if I click this it should increase it by 1 it should be now 1 so if I save that it works sweets I'm gonna do a little bit more and again the count is being reset to zero every time because I'm doing before each so before each it's statement it's going to reset the count because it's reading the component from the beginning by for studied this 1 2 3 4 this should now be 4 cool now so just to catch up to speed I have a react component that is using hooks that I'm testing just as I would any other component which is lovely don't worry about any special considerations for let's actually test the use effect hook so if I grab this I want to say I want to say that my on count change handler I say expect this to be called so first I want it to be called by default once because when the first renders it should render that value there yes it does now if I click it that should be called twice because when you click it you're in trading account which then causes this use effect to be reran cool now what's interesting is that you can kind of play around with the functionality of use effect if you wanted to the second argument of use effect lets you control when the effect is ran so if you put in an empty array there this effect will only run on the initial render of this component which means that when I do that this second assertion should actually fail because it's not going to actually be we're entering the it will the user hook will not be we executed because it's only being done on mount so if I save this I should see that tail sweet and it does because I've had to be called two times it was called one time and if I want to actually just optimize very prematurely this component I could say only rerun this effect when the count variable changes which means that this should then work again because when I increment it the value is changing which means that use effects will run so cool so that's me testing a component using cloaks very cool so let's take this up a notch so let's imagine that you've written a custom hook and a custom hook is essentially a function that is prefixed with use and uses other hooks or whatever you want to do so for our cases I've made a very basic use custom hook which is use custom counter custom hook and let's say we want to have one that's maybe more complex and I can't work that complexity right now but let's say you wanted to test that hook and isolation you might be wondering how could you do that and I'm glad you're here because now I can show you how to test a custom hook so the first thing to do is drag us over here just for cleanliness sake I'm going to import my custom sorry use custom hook from you use custom hook now to make a new describe block describe I'm gonna say just only for this one this is a jest thing where I can just have just from these tasks I know the other one already passes I don't really want to have that be confusing me so let's start things simple so I want to say it works and here and again I'm just gonna say expect 2 plus 2 to equal 4 save that and it's just gonna run this one block of tests cool so it works now let's say I want to so when I this custom hook is returning an object with counting increments so let's say naively I want to say results equals use custom hook do you have any idea what's going to happen any guesses before I show you the answer any guesses 3 2 1 it's from the from the code see what happens fire and brimstone invariant violation in that book all hooks can only be called inside of the body of a function component this is a rule of hooks in that hooks can only be called inside function components do you see function component here because I certainly don't if I don't make a hook wrapper component here and then have say results I'm gonna say results equals use custom hook inside of this function and then when I use our good friend enzyme to run this hook wrapper so when I mount this book wrapper it's gonna run my custom hook and assign the results the results and get that here so if I say expect results count two equals zero it's not gonna work oh it's not oh because my complaint actually has to reach her in a ballot react element so I'm gonna turn in all their save Lant and cool it's working I had to change this to one that should fail because by default that count is zero again expected longer see if they're so cool so this is kind of gross to have to write a couple of times so what you can actually do and there's also libraries to do this as well is to make your own little custom rendering hook wrapper so what you can do here is you can say render hook this takes in the hook itself and then what we can do is render this right here and we can say hook is right like that and I'm gonna say mount hook wrap works again we have to render that inside and the component and then we're gonna say results and then we're actually going to return the results so leaving this little wrapper function so what I can now do instead is just do a renderer so say cons results equals render hook and my hook is going to be use custom hook like that if everything works out it does it works lovely so let's actually use the other value which is increment a changement things here so I call results dots increment they have it expect this to equal one oh but what is this there's all stock count equal one ooh what's that's done here an update to hook reference that a test was not wrapped in act my testing code that causes reacted to update seemed to wrap it into act so act is actually a little built-in test utility from react itself so I every were to import act from here react Dom test utils and then I can wrap this function that's causing a state update like so call that and Oh expected one to equal results increments so this is failing but that's alright I think it's a little render hook requires a little bit of work right here I think instead of I have to just choice this variable outside of it for preferences purposes I have to do a little bit more deep into why that is but if I do that and then actually just reference that one result up above which is being saved on an initial render then things work as expected and you're testing your own custom hook so that's how you test reacts in your application they're mostly like testing just regular react components you can use whatever test framework runner assertion elaborate that you want to use enzyme react esting library just as plain react testing utilities whatever you want you can test in the same exact way hopefully that clears up some confusion that you might have had about testing reacts components and you're ready to actually start adding some tests to your application because there ain't nothing quite like a passing test suite let you sleep nice and calm late at night hopefully you enjoyed that video if you did please let me know down below get any questions please do add them into the comments as well and I will be back again next week with a new video for your own entertainment you're not already a subscriber did you become a subscriber down below I always love seeing that audience grow more people I can talk to and enjoy working with and we'll see you again next week

Channel: Harry Wolff

Views: 38,394

Rating: 4.788969 out of 5

Keywords: react hooks, testing, react, tutorial

Id: 9lkZ77m-39I

Length: 15min 5sec (905 seconds)

Published: Mon Jul 15 2019

Reddit Comments

[u/jack-hollow]

Nice video, man 🤘