React Testing Library Tutorial #8 - Assertions

Key Takeaways

all right in this video we are going to cover another unit test but here we're going to be focusing on the many different assertions that we can utilize to test the outcome of our test so we're going to be doing that by testing another component so i went ahead and i just commented out every single test except for the first one which tests our header so i will keep that and we should see here that one test has passed i also went ahead and i commented out the second header you can either comment it out or get rid of it all right so the second component that we're going to test is works very similarly to the first component that we tested which is this one over here the to do footer so the way that it works is that we are going to pass a number into this component as a prop and then is going to render a specific test or text rather so over here we're passing in zero and it's rendering zero tasks left now if we were to add a task then we're going to be passing in one and notice that it changed to one task left now if we were to add another one then we're going to be passing in two and then the text changes so that is what we are going to be testing again very very similar to this one so that is going to live inside if our to do footer and you can see here that is going to take in a prop number of incomplete tasks and you can see here that the text lives in a paragraph tag and you can see that there's just a quick regular expression to see if we should use plural or or sorry plural or singular and so that way if we have just one task left it's just one task left instead of one tasks left and we're also utilizing react router dom and this is a good thing because it's going to introduce how we can utilize react router and all these other external libraries when writing our tests because we're going to notice a quick error that we get when writing our tests so let's actually go ahead and let's create a underscore underscore test directory and in here we're going to as usual create our test so let's go and let's create the to do footer.test.js all right so now let's just copy this let's copy this format let's paste that in there and let's test uh let's test let's just change the text of the test block so over here we are basically testing should render the correct amount of incomplete tasks so should render the correct amount of incomplete tasks now the component that we are going to be utilizing is the to do footer so over here to do footer and over here let's say we're going to render the to do footer and then remember the prop is number of incomplete tasks so let's go ahead and let's say that the number of incomplete tasks is uh i don't know five and so over here what we should expect we should be able to get a paragraph element let's just go ahead here and just say para graph element and that should say well that should say let's actually just go ahead and let's just add five in there we should see five tasks left so we can say five tasks left and we should expect this paragraph element to be in the document so this seems like a very valid test but it is going to fail now why is it going to fail well the reason why it's going to fail and we can actually scroll up let's just scroll up you can see here that we are utilizing link outside of router and if we go to our header we're utilizing this link from react router dom to basically change the the url and change the page of our application now we cannot do that without let's just go over here to index.js without wrapping the component with browser router now because inside of our test we're testing this component in complete isolation it is not going to be wrapped with browser router so what we could do is create a component that wraps this component with browser router and what i like to do is call this a mock component so we can do something like mock to do footer and here this is just a function component and what we can do is we can import browser router from react router or dom so let's just import browser router and over here we can do browser router and now we have browser router and so now what we can do is we can pass in this component so in here we can wrap browser router within this component let's actually just make this a little bit prettier so it looks like this but now we need a way to pass the number that we want to pass in through the mock to do component so we can do that through props as well so we can go over here and just say number of incomplete tasks we're going to pass it in as a prop to the mock footer which is ultimately going to pass it in as a prop to the to do footer so you can see here that is how that works so now what we can do instead here is instead of rendering the to-do footer we could just render the mock to do footer that contains browser router so let's go over here and let us i'm just going to do it in a separate line i'm just going to do mock to do footer all right mock to do footer and over here we're going to do number of incomplete tasks and then we are going to pass in that number so we're going to pass in five so now if we save this and we go back to our tests and we scroll all the way down they're still failing for some reason that's strange i wasn't expecting that actually this i should go here and let's see why that's failing and it's saying um so nothing was rendered from render this usually means that the return statement so returns null okay i kind of find that strange actually so over here we have okay so nothing was rendered from render huh that is strange it's over oh and that's because well we forgot to return so you of course have to return our component so remember this has to be a valid component makes you have to return the jsx so let's go over here and let's quickly save that and now our tests pass okay cool all right so now that we got that out of the way let's start looking at some of the different assertions because now all we're doing right now is just saying hey is this element in the document and we might want to do many many other assertions so another assertion that we might do is if we have only one task left so if we pass in one we expect it to use the singular task so let's actually copy this and let's go here and let's just change this block so let's just change this block we're going to say should render we're going to say task singular when the number of incomplete tasks incomplete tasks is one and so if we pass in one we should see the singular version so one task left so we can also assert this so we can go ahead and this is a very valid test so this is these are two very valid tests so now let's just go and let's write some other tests that we're just going to use to learn more about assertions but i think for this particular component these two tests really do the trick but again let's just go ahead and let's just write some more tests just to test more about uh assertions so i'm just going to go ahead and copy this and i'm going to go and paste it and now let's start working with some other assertions so over here what we can do to look at the other assertions we can just do dot and we can see some of the many assertions that we can utilize to be to be called with to be falsy to be invalid to be less than most of these assertions they really speak from themselves and they're very self-documented to be null that makes sense to be truthy so to be truthy well it returns a true value and actually what we can do is we can actually hover over this and we can read more about the assertion when used when you don't care what the value is you just want to assert that it returns a true value so it shouldn't be false it shouldn't be zero it shouldn't be an empty string should it be null shouldn't be undefined shouldn't be not a number and well this is exactly going to be to be truthy so we can actually assert this and that is fine so you can see here that that test passed now we can also assert multiple different things and i won't be unfortunately i won't be able to go through all of the different methods because there are so many but again you can always hover over it and just read the documentation for it so the next one i want to talk about is to be visible this one's a very interesting one so again you can go ahead and hover over it and you can see here that this one allows you to check that the element is actually visible to the user so here what we're doing is we're checking if the element is in the document but here we're checking if the element is visible to the user so the element could still be in the document but not visible to the user so for instance for instance right now the element of course is going to be visible to the user but what if i went to that element that footer element and i added these styles so let's add these styles of opacity of zero so to me that's not going to be visible because the opacity is zero now it is still in the document but the opacity is zero so we can actually use to be visible to test hey is it visible to my user and you can see here that it fails so that is a really really good test so let me just go ahead and just get rid of that and now let's talk about some of the other some of the other ones that i'm going to introduce again won't be able to introduce all of them so let's go over here and let's do dot and then we can say here to contain so we are going to get a specific element and in this element we can assert that hey this element is going to contain the following html element so ep tag so we can go ahead and save this and this is a valid assertion now if we say hey we expect to get a h3 tag then that's not a valid assertion because what we all what we get back is a p tag so let's go here and let's just change the p tag all right so let's talk about some of the other ones i'm just going to go ahead and just explore some of the other ones let's see here so let's go let's do dot and we can also say to have text content so we can say to have text content so instead of saying that hey we want to assert that this is in the document we can say to have text content where is it to have text content and this text content is going to be one task left so let's say we weren't able to uh get the element by the text so we we got it by test id then we can assert that hey it has the text content of one task left now here we're kind of doing a double assertion but you can imagine maybe we got this you know get by we got it by the roll and paragraph and then we want to test the text content of that paragraph and that has failed for some reason because it's not in here i guess p tags don't have the role of paragraphs which really doesn't make that much sense to me again you can read more about the documentation for the role but you guys get the gist just to just to 100 prove this to you let me just add a test id so let's do data test id and i'm just going to call this para for paragraph so i'm going to go ahead and just copy this and i'm going to say here get by and then get by test id and i'm going to say para so go ahead i'm just going to quickly save this and we should get everything passing all right so let us now talk about the not a method that we can use so we can actually get the opposite of everything by adding dot not and then dot that method and that gets the opposite of what we want so we can over here if we save this well here we're saying that hey this should not be visible now it is visible so it is going to pass again if i went to this and i changed the styles so i changed these styles to opacity of zero then it should not be visible and then this assertion should pass because here what we're saying is hey this shouldn't be visible now let's just get rid of these styles let's get rid of that not so we can see here that we can utilize that so let's just copy a test and let's just use that not if we want to so again we can put that not to get the opposite of the assertions that we have specified so we can say here something like dot not dot to be falsy so here we expect it to not be falsy so we can go ahead and save this and this should pass and it does all right so let me just check my notes um it seems like we have one more that i want to talk about so what we can also do is inside of here what we can do is this is a element and we can actually get some of the attributes of that element so we can get some the value for instance of that element and then over here what we can do at that point is do just a simple assertion a dot 2b assertion and then in here we're going to say hey we expect the value of the paragraph element to be well one task left so one task left so we can get the attributes and actually just assert the attributes themselves now why did why didn't that work uh let's see why didn't that work i'm a little confused actually um so we're getting by para getting by data test id which is para and we're it's a little confusing actually oh sorry we're not getting by value we're getting by text content so value is actually something that we only get from an input element but if you want to get the text content of a specific element then that's that's we would use text content instead you can see here that that passes all right so that is the assertions and we can actually assert multiple times inside of our test and so over here we can actually have multiple assertions now i don't recommend this i like to have one assertion per test because that really isolates where the error is happening inside of the test now let's say that these three pass but this one fails then that whole test is going to fail and then i have to diagnose which assertion is going which assertion is the one that actually failed so for instance over here let's just say i added five tasks left well we can actually do all these assertions but now we have one failed test and i have to figure out that well actually i guess it tells you that this is the one that fails so you can add multiple assertions in there if you want to so if i were to do one task left then everything is going to pass but again i this is not a very common approach you could do it if you want to but i recommend one assertion per test all right cool so that is pretty much it and i hope that introduces assertions to you in a very well manner and i'll see you guys in the next lecture